/*
* HTML5 Boilerplate
*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*
* Detailed information about this CSS: h5bp.com/css
*
* ==|== normalize ==========================================================
*/
/* =============================================================================
HTML5 display definitions
========================================================================== */
article, aside, details, figcaption, figure, footer, header, .hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }
/* =============================================================================
Base
========================================================================== */
/*
* 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
* 2. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
*/
html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
html, button, input, select, textarea { color: #222; }
body { margin: 0; line-height: 1.4; }
/*
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection declarations have to be separate
* Also: hot pink! (or customize the background color to match your design)
*/
/* =============================================================================
Links
========================================================================== */
/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active { outline: 0; }
/* =============================================================================
Typography
========================================================================== */
/*
* Addresses font sizes and margins set differently in IE6/7
* Addresses font sizes within 'section' and 'article' in FF4+, Chrome, S5
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
h2 {
font-size: 1.5em;
margin: 0.83em 0;
}
h3 {
font-size: 1.17em;
margin: 1em 0;
}
h4 {
font-size: 1em;
margin: 1.33em 0;
}
h5 {
font-size: 0.875em;
margin: 1.67em 0;
}
h6 {
font-size: 0.75em;
margin: 2.33em 0;
}
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
iframe { width: 100%; }
dfn { font-style: italic; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
/* Redeclare monospace font family: h5bp.com/j */
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
/* Improve readability of pre-formatted text in all browsers */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
/* =============================================================================
Lists
========================================================================== */
ul, ol { margin: .5em 0 1em; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
/* =============================================================================
Embedded content
========================================================================== */
/*
* 1. Improve image quality when scaled in IE7: h5bp.com/d
* 2. Remove the gap between images and borders on image containers: h5bp.com/i/440
*/
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
/*
* Correct overflow not hidden in IE9
*/
svg:not(:root) { overflow: hidden; }
/* =============================================================================
Figures
========================================================================== */
figure { margin: 0; }
/* =============================================================================
Forms
========================================================================== */
form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
/* Indicate that 'label' will shift focus to the associated form element */
label { cursor: pointer; }
/*
* 1. Correct color not inheriting in IE6/7/8/9
* 2. Correct alignment displayed oddly in IE6/7
*/
legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }
/*
* 1. Correct font-size not inheriting in all browsers
* 2. Remove margins in FF3/4 S5 Chrome
* 3. Define consistent vertical alignment display in all browsers
*/
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
input:focus,
button:focus { outline: thin dotted; outline: -webkit-focus-ring-color auto 5px; }
/*
* 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
*/
button, input { line-height: normal; }
/*
* 1. Display hand cursor for clickable form elements
* 2. Allow styling of clickable form elements in iOS
* 3. Correct inner spacing displayed oddly in IE7 (doesn't effect IE6)
*/
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
/*
* Re-set default cursor for disabled elements
*/
button[disabled], input[disabled] { cursor: default; }
/*
* Consistent box sizing and appearance
*/
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
/* Add placeholder text styles */
::-webkit-input-placeholder { color: #a3a3a3; }
:-moz-placeholder { /* Firefox 18- */color: #a3a3a3; }
::-moz-placeholder { /* Firefox 19+ */color: #a3a3a3; }
:-ms-input-placeholder { color: #a3a3a3; }
/*
* Remove inner padding and border in FF3/4: h5bp.com/l
*/
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
/*
* 1. Remove default vertical scrollbar in IE6/7/8/9
* 2. Allow only vertical resizing
*/
textarea { overflow: auto; vertical-align: top; resize: vertical; }
/* =============================================================================
Tables
========================================================================== */
table { border-collapse: collapse; border-spacing: 0; margin: 1em 0; }
td { vertical-align: top; }
/* =============================================================================
Chrome Frame Prompt
========================================================================== */
.chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; }
/*
* Amazium V1.0.0
* Copyright 2011, Mike Ballan
* www.amazium.co.uk
*/
/* Standard 1140px ----------- */
.grid_1 { width:65px; }
.grid_2 { width:160px; }
.grid_3 { width:255px; }
.grid_4 { width:350px; }
.grid_5 { width:445px; }
.grid_6 { width:540px; }
.grid_7 { width:635px; }
.grid_8 { width:730px; }
.grid_9 { width:825px; }
.grid_10 { width:920px; }
.grid_11 { width:1015px; }
.grid_12 { width:1110px; }
.column { margin:0 15px 0 15px; float:left; display:inline; }
.row {
margin:0 auto;
width:1170px;
}
.row .row {
margin:0 -15px 0 -15px;
width:auto;
display:inline-block;
}
.wrapper {
padding-left: 15px;
padding-right: 15px;
float: left;
position: relative;
}
/***** Smaller than 1139px *****/
@media only screen and (min-width: 960px) and (max-width: 1139px) {
.grid_1 { width:50px; }
.grid_2 { width:130px; }
.grid_3 { width:210px; }
.grid_4 { width:290px; }
.grid_5 { width:370px; }
.grid_6 { width:450px; }
.grid_7 { width:530px; }
.grid_8 { width:610px; }
.grid_9 { width:690px; }
.grid_10 { width:770px; }
.grid_11 { width:850px; }
.grid_12 { width:930px; }
.column { margin:0 15px 0 15px; float:left; display:inline; }
.row { margin:0 auto; width:990px;}
.row .row {
margin:0 -15px 0 -15px;
width:auto;
display:inline-block;
}
}
/***** iPad Smaller than 959px *****/
@media only screen and (min-width: 768px) and (max-width: 959px) {
.grid_1 { width:24px; }
.grid_2 { width:92px; }
.grid_3 { width:172px; }
.grid_4 { width:216px; }
.grid_5 { width:280px; }
.grid_6 { width:344px; }
.grid_7 { width:408px; }
.grid_8 { width:470px; }
.grid_9 { width:536px; }
.grid_10 { width:600px; }
.grid_11 { width:664px; }
.grid_12 { width:728px; }
.column { margin:0 10px 0 10px; float:left; display:inline; }
.row { margin:0 auto; width:768px; }
.row .row { margin:0 -10px 0 -10px; width:auto; display:inline-block; }
.wrapper {
padding-left: 10px;
padding-right: 10px;
}
}
/* iPhone (Portrait) ----------- */
@media only screen and (min-width: 320px) and (max-width: 480px) {
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
width:100%;
margin: 10px auto;
display: block;
float: none;
position: relative;
}
.column { margin:0px 0 0 0; float:left; display:inline; overflow:hidden; }
.row { width:100%; }
.row .row { margin:0; width:100%; display:inline-block; }
}
/* iPhone (Landscape) ----------- */
@media only screen and (min-width: 480px) and (max-width: 767px) {
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 { width:100%;
margin: 10px auto;
display: block;
float: none;
position: relative; }
.column { margin:0px 0 0 0; float:left; display:inline; overflow:hidden; }
.row { width:100%; }
.row .row { margin:0; width:100%; display:inline-block; }
}
/* Foundation Visibility HTML Classes */
.show-for-small,
.show-for-medium-down,
.show-for-large-down {
display: inherit !important; }
.show-for-medium,
.show-for-medium-up,
.show-for-large,
.show-for-large-up,
.show-for-xlarge {
display: none !important; }
.hide-for-small,
.hide-for-medium-down,
.hide-for-large-down {
display: none !important; }
@media only screen and (min-width: 768px) {
.show-for-medium,
.show-for-medium-up {
display: inherit !important; }
.show-for-small {
display: none !important; }
.hide-for-small {
display: inherit !important; }
.hide-for-medium,
.hide-for-medium-up {
display: none !important; }
/* Specific visilbity for tables */
table.show-for-medium, table.show-for-medium-up, table.hide-for-small {
display: table; }
thead.show-for-medium, thead.show-for-medium-up, thead.hide-for-small {
display: table-header-group !important; }
tbody.show-for-medium, tbody.show-for-medium-up, tbody.hide-for-small {
display: table-row-group !important; }
tr.show-for-medium, tr.show-for-medium-up, tr.hide-for-small {
display: table-row !important; }
td.show-for-medium, td.show-for-medium-up, td.hide-for-small,
th.show-for-medium,
th.show-for-medium-up,
th.hide-for-small {
display: table-cell !important; } }
/***** Basic Styles *****/
html { overflow:-moz-scrollbars-vertical; }
body { font-family: 'Open Sans', sans-serif; }
/***** Blockquotes *****/
blockquote, blockquote p:first-child { font-size:18px; line-height:28px; }
blockquote p:first-child { color: #73000a; }
blockquote { margin: 10px 0 15px; padding: 3% 9% 3% 85px; position:relative; background-color:#ececec; }
blockquote:before, blockquote:after { display: block; content: "\201C"; font-size: 164px; font-family: Georgia; position: absolute; top: 52px; color: #FFF; }
blockquote:before { left: 2%; }
blockquote:after { content: "\201D"; right: 15px; top:106%; }
blockquote .cite { display:block; font-size:12px; color:#000; }
blockquote .cite:before { content:"\2014 \0020"; }
blockquote .cite a,
blockquote .cite a:visited,
blockquote .cite a:visited { color:currentColor; }
blockquote span { width:15px; display:inline-block; }
hr { margin:20px 0 20px 0; border:0; border-top:1px dotted #a3a3a3; height:2px; width:100%; text-align:left; }
/***** Links *****/
a:link { color:#73000a; text-decoration:none; }
a:visited { text-decoration:none; outline:0; color:#73000a; }
a:hover, .links a:hover, .ribbon a:hover { color:#818701; }
a:active { color:#333; text-decoration:none; }
a:focus { -moz-outline-style:none; outline: thin dotted; outline: -webkit-focus-ring-color auto 5px; }
/* For External links outside of the site and new window */
.new-window:after {
content: '';
background: url(../img/icons/external_link.png) no-repeat center right;
padding-right: 15px;
width: 11px;
height: 11px;
}
/***** Typography *****/
h1, h2, h3, h4, h5, h6 { color:#73000a; margin: 0px 0px 5px; }
p {
line-height:1.8em;
margin-top:0px;
font-size: 14px; font-size:.875rem; /* 14px / 16px */ }
/***** Lists *****/
ol { list-style:decimal; }
ul.square, ul.circle, ul.disc { margin-left:15px; }
ul.square { list-style:square outside; }
ul.circle { list-style:circle outside; }
ul.disc { list-style:disc outside; }
ul.fancy li { padding:0 0 0 15px; background:transparent url('../images/bullet.png') no-repeat 0 3px; }
ul ul li, ul ol li, ol ol li, ol ul li { }
ul.large li { line-height:21px; }
li p { line-height:21px; }
dt { font-weight:bold; color:#73000a; }
/***** Tables *****/
table { font-size:14px; width: 100%; }
table th { color: #FFF; background-color: #5B5B5B; text-align: left; }
table th, table td { padding:7px; border: 1px #c8c8c8 solid;}
caption { text-align:left; margin-bottom: 7px; }
/***** Responsive tables *****/
@media only screen and (max-width: 960px) {
/* Force regular tables to not be like tables anymore */
table.regular,
table.regular thead,
table.regular tbody,
table.regular th,
table.regular td,
table.regular tr {
display: block;
overflow: hidden;
}
/* Hide table headers (but not display: none;, for accessibility) */
table.regular thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
table.regular tr {
border: 1px solid #ccc;
}
table.regular td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #c8c8c8;
position: relative;
padding: 8px 6px 8px 50%;
word-break:break-all; word-break: break-word;
}
table.regular td:before {
float: left;
width: 100%;
margin-left: -100%;
box-sizing: border-box;
padding-right: 10px;
font-weight: 700;
}
}
/***** Images *****/
img { border:0; }
.roundedCorners { border-radius: 0px 10px 0px 10px; }
.max-image { width:100%; height:auto; }
video { max-width: 100%;height: auto; }
.video-container { position:relative; margin:0 0 15px 0; padding-bottom:51%; padding-top:30px; height:0; overflow:hidden; border:1px solid #ccc; display:block; width:65%; }
.video-container iframe,
.video-container object,
.video-container embed { position:absolute; top:0; left:0; width:100%; height:100%; }
/***** Form *****/
label {
font-weight: 500;
font-size: 14px;
width: 100%;
display: inline-block;
text-align: left;
margin-bottom: .5em;
vertical-align: middle;
}
input[type="submit"],
input[type="search"],
input[type="reset"],
input[type="number"],
input[type="phone"],
input[type="time"],
input[type="tel"],
input[type="date"],
input[type="button"],
input[type="text"],
input[type="password"],
input[type="email"],
select,
textarea {
width: 100%;
height: 35px;
border: 1px solid #A3A3A3;
border-radius: 7px;
font-family: "Open Sans", sans-serif;
max-width: 48em;
margin-bottom: 1em;
padding-left: 10px;
box-sizing: border-box;
}
textarea { height: auto; }
input[type="submit"] {
width: auto;
background-color: #73000a;
color: #fff;
padding: 0 15px;
text-transform: uppercase;
border: none;
}
/* Form Validation */
input:required:focus:valid,
textarea:required:focus:valid {
border: 1px solid green;
-webkit-box-shadow: 0 0 10px 0 rgba(0,128,0,.3);
box-shadow: 0 0 10px 0 rgba(0,128,0,.3);
transition: .25s ease-in;
}
input:required:focus:invalid:focus
textarea:required:focus:invalid:focus {
border: 1px solid #E9322D;
-webkit-box-shadow: 0 0 10px 0 rgba(233,50,45,.3);
box-shadow: 0 0 10px 0 rgba(233,50,45,.3);
transition: .25s ease-in;
}
/***** Buttons *****/
a.btn { margin:5px 0 5px 0; padding:4px 28px 4px 8px; display:inline-block; font-size:11px; color:#fff; border:1px solid #444; background:#333 url(../images/btn-arrow.png) no-repeat right; border-radius:4px; -webkit-border-radius:4px; -moz-border-radius:4px; cursor:pointer; }
a:hover.btn { text-decoration:underline; }
/***** Carolina Alert *****/
.carolina-alert {
position: relative;
z-index: 99;
background-color: #D5AC00;
padding-left: 15px; padding-bottom: 5px; padding-top: 10px;
}
.all-clear { background-color: #47af15; }
.carolina-alert-desc,
.carolina-alert a { margin-top: 0; margin-bottom: 10px; }
.carolina-alert a { font-weight: 700; text-decoration: underline; color: #00F; }
/* jReject styles for old browsers */
#jr_overlay {
top: 0;
left: 0;
padding: 0;
margin: 0;
z-index: 200;
position: absolute;
}
#jr_wrap {
position: absolute;
text-align: center;
width: 100%;
z-index: 300;
padding: 0;
margin: 0;
}
#jr_inner {
font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
font-size: 12px;
background: #FFF;
border: 1px solid #CCC;
color: #4F4F4F;
margin: 0 auto;
height: auto;
padding: 20px;
position: relative;
}
#jr_header {
display: block;
color: #333;
padding: 5px;
padding-bottom: 0;
margin: 0;
font-family: Helvetica,Arial,sans-serif;
font-weight: bold;
text-align: left;
font-size: 1.3em;
margin-bottom: 0.5em;
}
#jr_inner p {
text-align: left;
padding: 5px;
margin: 0;
}
#jr_inner ul {
list-style-image: none;
list-style-position: outside;
list-style-type: none;
margin: 0;
padding: 0;
}
#jr_inner ul li {
cursor: pointer;
float: left;
width: 120px;
height: 122px;
margin: 0 10px 10px 10px;
padding: 0;
text-align: center;
}
#jr_inner li a {
color: #333;
font-size: 0.8em;
text-decoration: none;
padding: 0;
margin: 0;
}
#jr_inner li a:hover {
text-decoration: underline;
}
#jr_inner .jr_icon {
width: 100px;
height: 100px;
margin: 1px auto;
padding: 0;
background: transparent no-repeat scroll left top;
cursor: pointer;
}
#jr_close {
margin: 0 0 0 50px;
clear: both;
text-align: left;
padding: 0;
margin: 0;
}
#jr_close a {
color: #000;
display: block;
width: auto;
margin: 0;
padding: 0;
text-decoration: underline;
}
#jr_close p {
padding: 10px 0 0 0;
margin: 0;
}
/***** Header *****/
html { background: url('../img/bg-pattern.png') repeat; background-color: rgba(0, 0, 0, 0.1); }
body {
margin-bottom: 0px;
background: url(../img/feathers.png) no-repeat left top;
background-size:100%;
}
#skiptocontent {
position:absolute;
top:-10000px;
}
#logo {
float: left;
width: 100%;
padding-right: 10px;
margin-left: -15px;
margin-top: 20px;
}
#logo a {
width: 278px;
height: 53px;
display: inline-block;
background: url(../img/USC_Web_linear.svg) no-repeat 10px;
text-indent: 1000%;
white-space: nowrap;
overflow: hidden;
}
.no-svg #logo a { background: url(../img/USC_Web_linear.png) no-repeat 10px; }
/*
* Banner Toolbox - Search & Menu
*/
.search-btn-mobile,
.menu-btn-mobile, .menu-btn {
background: url(../img/search_menu.svg) no-repeat;
float: left;
background-color: #000;
width: 30px;
height: 30px;
padding: 5px;
box-sizing: content-box;
}
.no-svg .search-btn-mobile,
.no-svg .menu-btn-mobile, .no-svg .menu-btn { background-image: url(../img/search_menu.png); background-repeat:no-repeat; }
.search-btn-mobile { background-position:9px 9px; margin-right:10px; }
.menu-btn-mobile { position: relative; background-position:10px -30px; }
.menu-btn-mobile:before {
content: 'MENU';
position: absolute;
top: 5px;
left: 10px;
font-size: 7px;
color: #FFF;
text-indent: 0;
}
.mobile-logo {
background: url(../img/USC_Web_main.svg) no-repeat 10px;
height: 45px;
}
.no-svg .mobile-logo { background: url(../img/USC_Web_main.png) no-repeat 10px; }
/* MY.SC.EDU menu */
.gateways-wrapper { float: left; }
.menu-btn, .menu { border: none; border-radius: 0 0 5px 0; }
.menu-btn {
width: 75px;
height: 17px;
z-index: 4;
position: relative;
top: 0;
left: 0;
background-position: 73px -119px;
border: none;
color: #FFF;
font-size: 10px; font-size: .625rem;
font-weight: 600;
padding: 0 20px 0 0;
}
.menu-btn:hover { background-position: 73px -155px; }
.menu-btn strong { font-weight: 800; }
.menu {
position: absolute;
width: 220px;
padding-top: 26px;
visibility: hidden;
opacity: 0;
background-color: #000;
z-index: 3;
top: 0;
right: 0;
font-size: 1rem;
transition: transform .35s, opacity .35s, visibility 0s .35s;
transform: scale3d(.3,.3,.3);
transform-origin: 100% 0;
}
.menu.is-opened {
opacity: 1;
transform: scale3d(1,1,1);
visibility: visible;
transition: transform .35s, opacity .35s;
}
.menu-list a { color: #fff; }
.menu-list a:hover, .menu-btn:hover,
.banner-tools a:hover { color: #d0da00; }
.banner-toolbox {
float: right;
background-color: #000;
border-radius: 0 0 7px 7px;
font-size: 10px; font-size: .625rem;
padding: 5px 10px;
position: relative;
font-weight: 600;
height: 28px;
margin-right: -15px;
box-sizing: border-box;
}
.banner-tools {
display: inline-block;
text-transform: uppercase;
margin-top: 3px;
padding: 0;
float: left;
}
.banner-tools li { display: inline; padding-right: 10px; }
.banner-tools a { color: #fff; padding: 10px 0; }
#search-desktop { position: relative; display: inline-block; float: left; }
#search-desktop:hover .submit,
#search-desktop .search-input:focus + .submit { background-color: #5b5b5b; color: #fff; }
#search-desktop .search-input,
#search-desktop .submit {
height: 18px;
outline: none;
border: none;
transition: all .2s ease;
background-color: #C8C8C8;
float: left;
padding: 0 10px;
width: auto;
}
#search-desktop .search-input {
width: 117px;
background-image: url('../img/search_menu.svg');
background-repeat: no-repeat;
background-position: 3px -82px;
border-radius: 5px 0 0 5px;
padding-left: 20px;
box-sizing: border-box;
}
.no-svg .search-input { background-image: url('../img/search_menu.png'); }
.search-input::-webkit-input-placeholder { color: #353535; }
.search-input:-moz-placeholder { /* Firefox 18- */color: #353535; }
.search-input::-moz-placeholder { /* Firefox 19+ */color: #353535; }
.search-input:-ms-input-placeholder { color: #353535; }
#search-desktop:hover .search-input,
#search-desktop .search-input:focus { background-color: #fff; }
#search-desktop .submit { border-radius: 0 5px 5px 0; color: #C8C8C8; }
/*
* Mobile Menu
*/
.sidr {
display: none;
position: fixed;
top: 52px;
height: 100%;
z-index: 9997;
width: 100%;
overflow: auto;
background: #000;
-webkit-overflow-scrolling: touch;
-webkit-backface-visibility:hidden;
}
.sidr.right { left: auto; right: -600px; }
.sidr .sidr-inner {
overflow: auto;
margin: auto;
width:100%;
height:100%;
padding-bottom: 55px;
box-sizing: border-box;
}
/*
* Moblie/Header menu
*/
.menu-header, .menu-list a {
padding-top: 7px;
padding-bottom: 7px;
padding-left: 10px;
}
.menu-header {
background-color: #5B5B5B;
text-transform: uppercase;
font-size: .6875em;
color: #C8C8C8;
margin: 0;
clear: both;
}
.menu-list a { text-decoration:none; display: block; }
.menu-list li {
color: #fff;
border-top: 1px solid #7F7F7F;
font-weight: 700;
}
.menu-list li:hover { color: #b6bf00; }
.menu-list span {
display: block;
font-weight: 400;
font-size: .875em;
margin-top: -3px;
}
/* End Search */
/* Main Navigation Items
----------------------------------------------------*/
#mainnav {
width: 100%;
display: inline-block;
font-family:'Droid Sans';
font-weight:700;
font-size:1.125em; /* 18px / 16px */
background: rgb(59,59,59); /* Old browsers */
background:url(../img/Line-Diag-2-white50.png) 0 0 repeat, -ms-linear-gradient(-60deg,rgb(60,60,60) 0%,rgb(130,130,130) 100%); /* IE10+ */
background:url(../img/Line-Diag-2-white50.png) 0 0 repeat, -moz-linear-gradient(top left,rgb(60,60,60) 0%,rgb(130,130,130) 100%); /* W3C */
background:url(../img/Line-Diag-2-white50.png) 0 0 repeat, -webkit-linear-gradient(top left,rgb(60,60,60) 0%,rgb(130,130,130) 100%); /* Webkit */
background:url(../img/Line-Diag-2-white50.png) 0 0 repeat, linear-gradient(top left,rgb(60,60,60) 0%,rgb(130,130,130) 100%); /* W3C */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff3c3c3c,endColorstr=#ff828282,GradientType=1); /* IE6-9 fallback on horizontal gradient */
}
#mainnav > ul { padding: 0 0 0 15px; }
#mainnav > ul > li { padding-bottom:15px; }
#mainnav ul li { line-height: 1.4em; }
#mainnav a:hover { text-decoration:none; }
.toplevel > li { margin-left: 8px; }
.toplevel .first-item { padding-top:15px; }
.toplevel a { color:white; padding-right: 10px; display: block; }
.toplevel a:hover { color:#b6bf00; }
.toplevel ul.currentlevel { margin-left:-9px; }
.toplevel > li > ul.currentlevel #selected { font-size: 1.125em; padding-top: 2px; }
.toplevel > li.historylevel > ul.currentlevel #selected {font-size: 1em; padding-top: 2px; }
#mainnav .historylevel {
padding-left:17px;
padding-bottom:10px;
background-color: #7f7f7f;
box-shadow: -3px 2px 5px 0 rgba(0, 0, 0, .3);
margin-bottom:15px;
padding-top: 7px;
font-size: .875em; /* 14px / 16px */
margin-left: 2px;
}
.historylevel > a:link {margin-left: -10px; padding-left: 1px; }
.historylevel a:hover { color:#d0da00; }
.historylevel > a:first-child { font-size: 1.125em; }
.historylevel > ul.currentlevel {
margin-left: 0;
margin-top: 5px;
padding-bottom:2px;
margin-bottom: 5px;
}
.historylevel > ul.currentlevel li#selected:last-child { padding-bottom:0; }
.historylevel ul.currentlevel li#selected:only-child { padding-left: 15px; }
.historylevel .childlevel { font-size:1em; }
.historylevel ul.currentlevel #selected > a {
margin-left: -7px;
padding-top: 6px;
padding-bottom: 6px;
padding-left: 14px;
}
.historylevel ul.currentlevel #selected > a:after { border-bottom: 15px solid transparent; }
.historylevel ul.currentlevel #selected:last-child { padding-bottom:0; }
.historylevel ul.sublevel li#selected:only-child { padding-top: 2px; }
ul.sublevel {
margin:0px;
margin-left:-8px;
padding-left:15px;
padding-top: 7px;
}
ul.sublevel > li > a:link {
background: url(../img/DownArrow-w.png) no-repeat 0 center;
padding-left: 8px;
margin-left: -10px;
}
ul.sublevel > li > a:hover { background: url(../img/DownArrow-green.png) no-repeat 0 center; }
/* Sublevel spacing at different levels */
ul.sublevel ul.currentlevel { margin:6px 0px 0px -8px; padding-bottom: 2px; }
ul.sublevel ul.sublevel ul.currentlevel { margin-left:-15px; }
ul.sublevel ul.sublevel ul.sublevel ul.currentlevel { margin-left: -22px; }
ul.sublevel ul.sublevel ul.sublevel ul.sublevel ul.currentlevel { margin-left:-28px; }
ul.sublevel ul.sublevel ul.sublevel ul.sublevel ul.sublevel ul.currentlevel { margin-left: -36px; }
ul.sublevel ul.sublevel ul.sublevel ul.sublevel ul.sublevel ul.sublevel ul.currentlevel { margin-left: -42px; }
ul.sublevel ul.sublevel ul.sublevel ul.sublevel ul.sublevel ul.sublevel ul.sublevel ul.currentlevel { margin-left:-50px; }
ul.currentlevel {
background-color:#ECECEC;
padding: 0 0 0 15px;
box-shadow: -3px 2px 5px 0 rgba(0, 0, 0, .3);
font-size: .875em; /* 14px / 16px */
font-weight:600;
margin-bottom: 0;
margin-top: 0;
}
ul.currentlevel li,
ul.sublevel > li:first-child { margin-bottom: 6px; }
ul.currentlevel li { padding-right: 5px; }
ul.currentlevel li:last-child { margin-bottom:2px; }
ul.currentlevel > li { padding-bottom: 5px; }
ul.currentlevel a { color:#222222; padding-right: 5px; position: relative; }
ul.currentlevel a:hover { color:#818701; }
ul.currentlevel #selected {
margin-left: -21px;
padding: 4px 0px 2px 15px;
margin-top:-6px;
}
ul.currentlevel #selected > a {
background-color: #73000A;
color: white;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 8px;
display: block;
cursor: default;
}
ul.currentlevel #selected a:hover {
}
ul.currentlevel #selected > a:after {
content:"";
width:0px;
height:0px;
border-bottom: 17px solid transparent;
border-top: 16px solid transparent;
border-left: 10px solid #73000A;
color: #73000A;
font-size: 0px;
line-height: 0px;
position: absolute;
top: 0px;
right: -9px;
}
ul.currentlevel > li:first-child { padding-top:10px; }
ul.currentlevel > li#selected:first-child { margin-top:6px; padding-top: 2px; }
ul.currentlevel > li#selected:last-child { margin-bottom: 0; }
ul.currentlevel > li#selected:only-child { padding-left: 8px; margin-top: 0; }
ul.childlevel {
font-weight:400;
margin: 5px 0px 5px 20px;
font-size: .75em; /* 12px / 16px */
}
#mainnav ul.childlevel li { line-height:1.3em; }
ul.childlevel li:last-child { margin-bottom: 0; }
/* For internal Audiences */
.internal-btn, .internal-btn-top {
background: rgb(186,186,186); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(186,186,186,1) 0%, rgba(219,219,219,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(186,186,186,1)), color-stop(100%,rgba(219,219,219,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(186,186,186,1) 0%,rgba(219,219,219,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(186,186,186,1) 0%,rgba(219,219,219,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(186,186,186,1) 0%,rgba(219,219,219,1) 100%); /* IE10+ */
background: linear-gradient(135deg, rgba(186,186,186,1) 0%,rgba(219,219,219,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bababa', endColorstr='#dbdbdb',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
color: #FFF;
font-weight: 700;
padding-bottom: 5px !important;
margin-left: -15px !important;
padding-left: 22px;
box-shadow: inset 0 5px 5px 0 rgba(0, 0, 0, .1);
padding-top: 5px;
font-size: .9em;
}
.internal-btn:hover, .internal-btn-top:hover {
background: rgb(151,151,151); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(151,151,151,1) 0%, rgba(175,175,175,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(151,151,151,1)), color-stop(100%,rgba(175,175,175,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(151,151,151,1) 0%,rgba(175,175,175,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(151,151,151,1) 0%,rgba(175,175,175,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(151,151,151,1) 0%,rgba(175,175,175,1) 100%); /* IE10+ */
background: linear-gradient(135deg, rgba(151,151,151,1) 0%,rgba(175,175,175,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#979797', endColorstr='#afafaf',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.internal-btn:hover a, .internal-btn-top:hover a { color:#d0da00 !important; }
.internal-btn-top { box-shadow: inset 0 -5px 5px 0 rgba(0, 0, 0, .2); }
/* LiveChat button styles */
.livechat_button {
position: fixed !important;
z-index: 10 !important;
bottom: 0 !important;
background-color: #73000A !important;
border-radius: 7px 7px 0 0 !important;
box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.3) !important;
padding: 5px 0 5px 20px !important;
font-weight: 700 !important;
box-sizing: border-box !important;
}
.livechat_button > a {
color: #fff !important;
display: block !important;
}
.livechat_button.is-not-fixed { position: absolute !important; }
/* Main Content
----------------------------------------------------*/
#mainWrapper {
margin-top: 10px;
z-index: 2;
background-color:#FFF;
border-radius: 0px 20px 0px 0px;
box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.5);
position: relative;
}
.main:before {
content:'';
width: 0px;
height: 0px;
border-style: solid;
border-width: 100px 0 0 5px;
border-color: transparent transparent transparent #000000;
}
.mainWrapper hr {
margin-top: 10px;
margin-bottom: 10px;
background: url(../img/border.png) repeat-x top center;
border:none !important;
width: 95%;
}
/* Transparency/Overlap only for Home page
----------------------------------------------------*/
#home{
margin-bottom: -70px;
background-color:#FFF;
background-color: rgba(255, 255, 255, 0.8);
z-index: 2;
margin-left: -15px;
padding-left: 15px;
padding-right: 15px;
border-radius: 0px 20px 0px 0px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, .3);
}
/* Arrow only for Home page
----------------------------------------------------*/
#home:before{
content: ' ';
border-color: transparent transparent transparent;
border-style: solid;
border-width: 25px;
position: absolute;
bottom: -50px;
left: 20px;
z-index: 9999;
}
#home:after{
content: ' ';
border-color: #FFF transparent transparent;
border-color: rgba(255, 255, 255, 0.8) transparent transparent;
border-style: solid;
border-width: 21px;
position: absolute;
bottom: -42px;
left: 24px;
z-index: 9999;
}
/* Bigger font-size for Home page ONLY */
#home h1 { font-size: 2.5em; /* 40px / 16px */ }
.branding {
float: left;
width: 100%;
font-weight:700;
position: relative;
}
.branding h1 {
display: block;
margin: 0px 0px 5px 0px;
font-weight:300;
font-size: 1.6em; /* 24px / 16px */
}
.branding h1 a { color: #000; }
.branding h1 strong {
font-weight:800;
color:#73000a;
font-size: 1.1em;
margin-left: 3px;
}
.branding hr {
margin: 0;
height:0px;
float: left;
clear: both;
}
/* Float Clearing
---------------------------------------------------------------------*/
.module:after
{
content: ".";
display: block;
height: 0;
visibility: hidden;
}
/* float clearing for IE6 */
* html .module
{
height: 1%;
overflow: visible;
}
/* float clearing for IE7 */
* + html .module
{
min-height: 1%;
}
/* Breadcrumb Styles
---------------------------------------------------------------------*/
.breadCrumb {
margin: 0;
padding: 0;
float: left;
display: block;
height: 21px;
overflow: hidden;
padding: 8px 0 18px !important;
width: 99%;
}
.breadCrumb ul {
margin: 0;
padding: 0;
height: 21px;
display: block;
}
.breadCrumb ul li {
display: block;
float: left;
position: relative;
height: 21px;
overflow: hidden;
line-height: 21px;
margin: 0px 6px 0px 0;
padding: 0px 10px 0px 0;
font-size: 0.6875em;
background: url(../img/breadcrumb_theme/Chevron.gif) no-repeat 100% 0;
}
.breadCrumb ul li div.chevronOverlay {
position: absolute;
right: 0;
top: 0;
z-index: 2;
}
.breadCrumb ul li span {
display: block;
overflow: hidden;
}
.breadCrumb ul li a {
display: block;
position: relative;
height: 21px;
line-height: 21px;
overflow: hidden;
float: left;
}
.breadCrumb ul li.first a {
height: 16px !important;
width:auto;
padding: 0;
overflow: hidden;
margin-top: 0px;
}
.breadCrumb ul li.first a:hover {
background-position: 0 -16px;
}
.breadCrumb ul li.last {
background: none;
margin-right: 0;
padding-right: 0;
}
.chevronOverlay {
display: none;
background: url(../img/breadcrumb_theme/ChevronOverlay.png) no-repeat 100% 0;
width: 13px;
height: 20px;
}
#main {
position: relative;
display: inline-table;
padding-bottom:85px;
}
#mainContent {
color: black;
float:left;
width:100%;
}
#mainContent a { font-weight:700; }
#mainContent a:hover { text-decoration:none; }
#mainContent ul, #mainContent ol, #mainContent dl { font-size:14px; line-height:1.8em; }
#mainContent .callout ul,
#mainContent .callout ol { font-size: 12px; font-size: .75rem; }
#mainContent p.home-intro {
font-size: 1.25em; /* 20px / 16px */
line-height: 1.5em;
font-weight:400;
margin: -5px 0 15px;
border-bottom: 1px dotted #a3a3a3;
padding-bottom: 20px;
}
#mainContent p.intro {
font-size: 18px; font-size: 1.125rem;
font-weight:400;
margin:0px 0px 20px;
border-bottom: 1px dotted #a3a3a3;
padding-bottom: 20px;
}
/* Links to get a double arrow icon
----------------------------------------------------*/
#mainContent h1 a:after, #mainContent h2 a:after, #mainContent h3 a:after, #mainContent h4 a:after, #mainContent h5 a:after, #mainContent h6 a:after, .view a:after, .flex-caption strong:after, .content-slider a .flex-caption h1:after, .simple-list a h4:after, .grid a .li-head:after, .multi-list .more:after, .callout .more a:after, .quick-fact b a:after, .news .sub-text a:after, .links h1 a:after {
content:"\00bb";
padding-left: 3px;
}
/* News Items
----------------------------------------------------*/
.simple-list article {
padding-bottom: 10px;
border-bottom: 1px dotted #a3a3a3;
float: left;
transition: all 0.5s ease 0s;
padding-top: 20px;
width: 100%;
font-weight: normal;
}
.simple-list > a {
display: block;
color:#000;
font-weight: normal;
}
.simple-list a:hover article { background-color:#f0f0f0; }
.simple-list article a:hover, #eventsbg a:hover {
text-decoration:none;
}
.simple-list a:hover h4, .grid li:hover a .li-head { color:#818701; }
.simple-list article img {
max-width: 24%;
float: left;
margin-right: 2.72727%; /* 15px / 550px */
}
.simple-list.mod-directory article img,
.simple-list.mod-directory-contact article img { max-width: 124px; }
.simple-list article .blurb {
width: 72%;
float: left;
}
.simple-list article .blurb-full { width:100% }
.simple-list article h4 {
margin-top: 0px;
border-style: none;
font-weight: 700;
color: #73000a;
}
.simple-list article p {
margin: 0px;
padding: 0px;
}
.simple-list.mod-directory-contact p:first-of-type { margin-bottom: 1em; }
.view {
font-size: 0.6875em;
float: right;
line-height: 2em;
margin-bottom:15px;
}
/* AddThis Sharing button */
.addthis_toolbox { margin-top: 10px; }
/* Event/Calendar items
----------------------------------------------------*/
#eventsbg {
background: #f0f0f0;
float: left;
width: 100%;
}
#eventsbg span:last-child {
font-size:0.6875em; /* 11px / 16px */
float:right;
padding-right:10px;
height: 20px;
line-height: 2em;
}
.events {
float: left;
border-bottom: 1px solid #FFF;
transition: all 0.5s ease 0s;
width: 92%;
color: #000;
padding: 15px 4%;
}
.events a:hover { color:#000; }
.events:hover { background-color:#dadada; }
.events:hover .accordion { height: 100%; max-height: 200px; opacity:1; }
.accordion {
transition: all 1s ease .2s;
max-height:0;
width:100%;
opacity:0;
float:left;
clear:both;
overflow:hidden;
position: relative;
top: 5px;
}
.accordion p { margin: 0px 0px 5px 0px; font-size: .75em; font-weight:normal; }
.accordion .details { color:#73000a; }
.accordion .details:after { content:"\00bb"; padding-left: 5px; }
.date {
background: #73000a;
float: right;
height: 42px;
width: 42px;
line-height: .94em;
font-weight: 700;
color:#FFF;
}
.date span {
font-size: .625em; /* 10px / 16px */
text-transform: uppercase;
margin: 0px;
padding-left: 12px;
}
.date h4 {
font-size: 1.375em; /* 22px / 16px */
margin-top: 0px;
margin-bottom: 0px;
padding: 0px 6px;
text-align: center;
font-family:Georgia, Times, serif;
font-style:italic;
color:#FFF;
}
.event-title {
float: left;
margin-top: 0px;
width: 70%;
margin-bottom:0px;
color: #000;
line-height:1.2em;
font-weight: 700;
font-size:.875em;
}
.content-body { margin-top:10px; float: left; width: 100%; }
.content-body ul ul { font-size: 1em; }
.content-body table { overflow:visible; border-collapse: separate; border: none; }
.content-body table tr:nth-child(even) { background: #ECECEC; }
.content-body table tr:nth-child(odd) { background: #FFF; }
/* Expand/Collapse Widget
----------------------------------------------------*/
/* Expand-All/Collapse-All Button */
.accordion-expand {
background: none;
border: 0;
color: #73000A;
float: right;
padding: 0;
font-size: .75em; /* 12px / 16px */
}
.accordion-summary {
color: #73000a;
font-weight: 700;
cursor: pointer;
padding: 5px 30px 5px 5px;
background-color: rgba(218, 218, 218, 0);
transition: all 450ms ease-in;
position: relative;
clear: both;
}
.accordion-summary:before {
content: "+";
width: 20px;
height: 20px;
border-radius: 50%;
border: 1px solid #73000A;
right: 3px;
text-align: center;
box-sizing: content-box;
line-height: 20px;
float: right;
display: block;
margin-right: -27px;
}
.accordion-summary > * {
margin: 0;
line-height: 1.8em;
}
.accordion-summary.selected,
.accordion-summary:hover{ background-color: #ececec; transition: all 400ms ease-in; }
.accordion-summary.selected:before {content: '–'; line-height: 18px; }
.accordion-details {
max-height:1px;
box-sizing: border-box;
overflow: hidden;
padding: 0 25px;
transition: max-height 500ms cubic-bezier(0, .6, .6, 1), padding .25s .3s;
border-color: #c8c8c8;
border-style: dotted;
border-width: 0 1px 1px 1px;
}
.accordion-details.opened {
max-height: 9999px;
padding: 1em 25px;
transition: max-height 1000ms ease-in, padding .25s;
}
.accordion-details:last-child { margin-bottom: 2em; }
/* Homepage Profiled Article Flip Begin */
.flip-container {
-webkit-perspective: 1000px;
perspective: 1000px;
float:left;
width: 100%;
height: 200px;
margin-right: 2%;
margin-bottom: 20px;
clear:both;
z-index: 9999;
position: relative;
}
.flip-container,
.front,
.back { overflow: hidden; }
.flipper {
-moz-transform: perspective(1000px);
-moz-transform-style: preserve-3d;
position: relative;
}
.front,
.back {
transition: 0.6s;
transform-style: preserve-3d;
position: absolute;
top: 0;
left: 0;
width: 100%;
background: rgba(0, 0, 0, 1);
}
.front { z-index:9998; }
.front h2, .front span {
transition: 0.6s;
position:absolute;
color:white;
font-weight: 700;
}
.front span {
bottom: 0;
left: 0;
width: 90%;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.7);
font-size: .875em;
padding: 5%;
margin:0;
border-top:1px solid #FFF;
}
.front span:before, .front span:after {
bottom: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
left:15%;
}
.front span:before {
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #ffffff;
border-width: 15px;
margin-left: -15px;
}
.front span:after {
border-color: rgba(0, 0, 0, 0);
border-bottom-color: #000000;
border-width: 13px;
margin-left: -13px;
}
.front h2 { top: 10px; left: 15px; padding-right: 5px; }
.back {
transform: rotateY(-180deg);
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.6);
backface-visibility: hidden;
padding: 10% 8% 0%;
width: 84%;
height: 178px;
overflow: hidden;
z-index: 9997;
}
.back h3 { color: #BFBF00; font-size: .875em; }
.back span { color:white; line-height:1.2em; }
.flip-container:hover .back { transform: rotateY(0deg); z-index:9999; }
.flip-container:hover .front { transform: rotateY(180deg); }
.flip-container:hover .front h2, .flip-container:hover .front h2, .flip-container:hover .front span { opacity:0; }
/* Homepage Profiled Article Flip End */
/* Image Grid List
----------------------------------------------------*/
.grid {
padding:0;
margin: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
.grid a {
text-decoration:none;
font-weight:normal;
display: block;
transition: all 0.5s ease 0s;
}
.grid a:hover { background-color:#F0F0F0; }
.grid > li {
width: 30.666667%;
list-style:none;
padding-right:4%;
margin-bottom: 1em;
float:left;
display: block;
}
.grid li:nth-of-type(3n+1) { clear: both; }
.grid li:nth-child(3n) { padding:0; }
.grid .li-img { position: relative; }
.grid img {
display: block;
width: 100%;
height: auto;
}
.grid .li-text { padding: 0 5% 5%; }
.grid .li-head {
line-height: 1.4em;
margin-top: 10px;
font-size: 1rem;
}
.grid .li-sub { margin:0; font-size:1em; font-weight: 400; color: #000; }
/* Callout items
----------------------------------------------------*/
.callout {
width:100%;
color:#FFF;
margin-bottom: 1em;
clear:both;
float: right;
padding-bottom: 10px;
position: relative;
}
.callout .hgroup { border-bottom: 1px solid white; z-index: 10; }
.callout .hgroup, .callout .sub-text, .callout form { padding: .5em 1em; position:relative; margin-bottom: 0; }
.callout .hgroup:before {
content: ' ';
border-color: rgb(255, 255, 255) transparent transparent;
border-style: solid;
border-width: 13px;
position: absolute;
bottom: -27px;
left: 19px;
}
.callout .hgroup:after {
content: ' ';
border-style: solid;
border-width: 12px;
position: absolute;
bottom: -24px;
left: 20px;
}
.callout-img {
position: relative;
}
.callout .category { text-transform: uppercase; color:#d0da00; margin: 0; font-weight: 700; }
.callout .header { color:#FFF; font-weight: 500; margin-bottom:0; line-height: 1.3em; font-size: 1.3em; }
.callout img { border-bottom: 1px solid #FFF; width: 100%; height: auto; }
.callout .sub-text { z-index: 1; margin-bottom:-5px; }
.callout .more {
float: left;
color: white;
padding-right: 20px;
font-weight: 700;
padding-left: 1em;
margin-top: 5px;
}
/* Colored Callout link styles excluding the related info callout */
[class="callout garnet"] a, [class="callout black"] a, [class="callout teal"] a, [class="callout blue"] a, [class="callout clay"] a, .news .view a { color:#FFF; }
[class="callout garnet"] a:hover, [class="callout black"] a:hover, [class="callout teal"] a:hover, [class="callout blue"] a:hover, [class="callout clay"] a:hover, .news .view a:hover { color:#d0da00; }
[class="callout light-blue"] a, [class="callout yellow"] a, [class="callout light-green"] a { color:#000; }
[class="callout light-blue"] a:hover, [class="callout yellow"] a:hover, [class="callout light-green"] a:hover { color:#FFF; }
.callout h1, .callout .sub-text, .callout .more { font-size: 12px; font-size: .75rem; }
/* Callout colors
----------------------------------------------------*/
.garnet, .garnet .hgroup { background-color:#73000a; }
.garnet .hgroup:after { border-color: #73000a transparent transparent; }
.garnet b,
.garnet b a,
.info-gray .header { color:#73000a; }
.black { background-color:#000; }
.black .hgroup:after { border-color: #000 transparent transparent; }
.black b,
.black b a { color:#000; }
.teal { background-color:#00747a; }
.teal .hgroup:after { border-color: #00747a transparent transparent; }
.teal b,
.teal b a { color:#00747a; }
.blue { background-color:#21578a; }
.blue .hgroup:after { border-color: #21578a transparent transparent; }
.blue b,
.blue b a { color:#21578a; }
.clay { background-color:#9C6409; }
.clay .hgroup:after { border-color: #9C6409 transparent transparent; }
.clay b,
.clay b a { color:#9C6409; }
.light-blue { background-color:#3cb6ce; }
.light-blue .hgroup:after { border-color: #3cb6ce transparent transparent; }
.light-blue b,
.light-blue b a { color:#3cb6ce; }
.yellow { background-color:#d7a900; }
.yellow .hgroup:after { border-color: #d7a900 transparent transparent; }
.yellow b,
.yellow b a { color:#d7a900; }
.light-green { background-color:#b6bf00; }
.light-green .hgroup:after { border-color: #b6bf00 transparent transparent; }
.light-green b,
.light-green b a { color:#b6bf00; }
/* Callout header colors
----------------------------------------------------*/
.light-blue .category, .light-blue .header, .light-blue .sub-text, .light-blue .more,
.yellow .category, .yellow .header, .yellow .sub-text, .yellow .more,
.light-green .category, .light-green .header, .light-green .sub-text, .light-green .more, .info, .info-gray, .gallery, .form { color:#000; }
.clay .category { color:#FFF; }
/* Single image callout lightbox gallery */
.lightbox-img:after {
background-image: url('../img/icons/video-gallery-sprite.svg');
background-repeat: no-repeat;
position: absolute;
width: 100%;
max-height: 35px;
left: 0;
background-color: rgba(0, 0, 0, 0.8);
bottom: 1px;
color: #FFF;
padding: 5px 0px 5px 40px;
font-size: 12px; font-size: .75rem;
line-height: 20px;
box-sizing: border-box;
}
.no-svg .lightbox-img:after { background-image: url('../img/icons/video-gallery-sprite.png'); }
.lightbox-img:after { content: "View Image(s)"; background-position: 10px -34px; }
/* Adding play button image over video thumbnail and on Image Grid Items
----------------------------------------------------*/
#home + .flex-container .lightbox-video:after,
#home-alternate + .flex-container .lightbox-video:after,
.content-slider .lightbox-video:after { background-image: url('../img/home_play_button.png'); width: 112px; height:112px; }
.content-slider .lightbox-video:after {
background-size: 70px;
width: 70px;
height: 70px;
}
.lightbox-video { display: block; position: relative; }
.lightbox-video:after, .lightbox-video .li-img:after {
content: '';
background: url('../img/play.png') no-repeat;
position: absolute;
width:51px;
height:51px;
margin: auto;
top: 0; left: 0; bottom: 0; right: 0;
}
/* Inline lightbox link */
.lightbox-img.mod-inline,
.lightbox-video.mod-inline {
position: relative;
display: inline;
margin-right: 20px;
}
.lightbox-img.mod-inline:after,
.lightbox-video.mod-inline:after {
content: '';
position: relative;
background-image: url('../img/icons/video-gallery-sprite.svg');
height: 18px;
width: 20px;
padding-left: 20px;
background-size: 15px;
background-color: transparent;
}
.no-svg .lightbox-img.mod-inline:after,
.no-svg .lightbox-video.mod-inline:after { background-image: url('../img/icons/video-gallery-sprite.png'); }
.lightbox-img.mod-inline:after { top:3px; background-position: 3px -86px; }
.lightbox-img.mod-inline:hover:after { background-position: 3px -146px; }
.lightbox-video.mod-inline:after { background-position: 3px -56px; }
.lightbox-video.mod-inline:hover:after { background-position: 3px -116px; }
/* Adjusting video play button for Image Grid list
----------------------------------------------------*/
.grid .lightbox-video:after { display: none; }
/* News callout
----------------------------------------------------*/
.news { padding: 0; }
.news .hgroup { z-index: 9998; }
.news .sub-text {
box-sizing: border-box;
padding: 0;
margin-top: 0;
}
.news .sub-text li { list-style: none; }
.news li a {
display: block;
padding: .7em 1em;
border-bottom: 1px solid #FFF;
line-height: 1.6em;
transition: .5s ease;
}
.news li a:hover { background-color: #dadada; }
.news li:first-child a { padding-top: 15px;}
.news .view {
padding: .5em 1em;
margin-bottom: 0;
line-height: 1.8;
}
/* Quick-fact callout
----------------------------------------------------*/
.quick-fact, .info, .gallery { padding-bottom:0; }
.quick-fact a:hover { color: #818701; }
.quick-fact .sub-text,
.news .sub-text { background-color:#ececec; color: #000; }
.quick-fact b,
#mainContent .quick-fact b a { display:block; font-size: 2.5rem; /* 40px / 16px */ margin: 10px 0 0; font-weight: 800; line-height: 1.2; }
/* Related info callout
----------------------------------------------------*/
.info .header,
.info-gray .header,
.news .header { font-size:1em; font-weight:700; margin:0; }
.info .sub-text, .gallery .sub-text { padding-top:15px; background-color: #ECECEC; }
.info .sub-text + * { background-color: #ECECEC; }
.info ul {
margin: 0;
padding-top: 1em;
padding-bottom: 1em;
padding-right: 1em;
}
.info-gray { border:1px solid #ECECEC; }
.info-gray .hgroup { background-color: #ECECEC; margin-bottom:15px; }
.info-gray .hgroup:after { border-color: #ECECEC transparent transparent; }
/* Highlight tip
----------------------------------------------------*/
.tip {
background-color: #ececec;
border-left: 5px solid #73000a;
padding: 1.5em 2em;
}
.tip p:only-child { margin-bottom: 0; }
/* Tweet-feed Callout
----------------------------------------------------*/
.callout.tweets-feed { border-right: 1px solid #ececec; border-left: 1px solid #ececec; }
iframe[id^='twitter-widget-']{ width:100% !important;min-width: 100px !important;}
/* Gallery & Form Callout
----------------------------------------------------*/
.form .hgroup { margin-bottom:10px; }
.gallery, .form {
padding: 0 0 10px;
float: left;
background-color: #ECECEC;
}
.gallery:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; }
.gallery ul { float: left; padding: 7px; }
.gallery li { float: left; width: 50%; list-style-type:none; }
.gallery li a { display: block; border: 1px solid #3c3c3c; margin: .5em; }
.gallery li a:nth-child(2n) { margin-right:0; }
.gallery li img { display: block; width: 100%; height: auto; border:none; }
.gallery .view-more { margin-right:15px; font-style: italic; float:right; font-size: .625em; /* 10px / 16px */ }
/* Checkbox for Directory Page
----------------------------------------------------*/
#input-switch {
float: right;
margin-bottom: -30px;
margin-top: 20px;
position: relative;
z-index: 10;
}
#input-switch label { display: inline; margin-left: 5px; font-weight:600; font-size: .875em; /* 14px / 16px */ }
/* Link/Icons for List Page
----------------------------------------------------*/
.multi-list .external, .multi-list .download {
padding-right: 35px;
}
.multi-list .external {
background: url(../img/icons/Ext_Link_g.png) no-repeat 95% center;
}
.multi-list .external:hover {
background: url(../img/icons/Ext_Link_white.png) no-repeat 95% center;
}
.multi-list .download {
background: url(../img/icons/download_arrow_g.png) no-repeat 95% center;
}
.multi-list .download:hover {
background: url(../img/icons/download_arrow_white.png) no-repeat 95% center;
}
.multi-list .more {
padding-right: 10%;
position: relative;
}
.multi-list .more:after {
font-size:17px;
padding-right: 5%;
position: absolute;
right: 0;
top: 3px;
}
/* End Main Content
----------------------------------------------------*/
/* Secondary Page styles
----------------------------------------------------*/
/* For Subdivision / Area titles */
.subdiv-title {
color: #000;
padding: 5px 0;
margin-bottom: 10px;
font-size: 1.25em; /* 20px / 16px */
font-weight: 300;
overflow: hidden;
border-bottom: 1px dotted #a3a3a3;
}
/* For Section head titles */
#sectionHead, #sectionHead_fac {
text-transform: uppercase;
color: #A3A3A3;
font-size:.9375em; /* 15px / 16px */
position: relative;
z-index:99999;
}
.subdiv-title ~ #sectionHead {
margin-bottom: 10px;
margin-top: -5px;
}
#sectionHead_fac {
float: left;
}
.mainImage {
margin-bottom:10px;
}
.mainImage + #sectionHead { margin-top: 0px; }
.content-slider + #sectionHead { margin-top: 10px; }
.multi-list {
}
.multi-list article {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%;
border-bottom:1px dotted #a3a3a3;
float:left;
padding-bottom:15px;
padding-top:15px;
position: relative;
}
.multi-list article:last-child {
border-bottom:none;
}
.multi-list img {
float:left;
margin-right:2.72727%; /* 15px / 835px */
max-width: 24%;
}
_:-ms-fullscreen, :root .multi-list img {
width: 24%;
}
.width {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
width:72%;
float:left;
}
.halfwidth {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
min-width: 50%;
float: left;
}
.multi-list ul:last-child {
margin:0;
margin-left: 2.72727%;
float:right;
width:20%;
padding-left:0px;
font-size:.8125em; /* 13px / 16px */
top: 0;
position: relative;
right: 0px;
}
.multi-list ul:last-child li {
background-color:#ececec;
border: 1px solid #dadada;
font-weight: bold;
list-style-type:none;
text-align: left;
margin-bottom: 3px;
border-radius: 3px;
}
.multi-list ul:last-child li:hover { background-color: #73000a; }
.multi-list ul:last-child li a { display:block; text-decoration:none; padding: 4px 0px 4px 10px; }
.multi-list ul:last-child li:hover a { color:#FFF; }
#detail {
float:left;
}
#person { float: left; }
#person nav {
font-weight: 600;
font-size: .6875em; /* 11px / 16px */
margin-top:3px;
margin-left: 15px;
}
#person span { margin-left:15px; }
#contact {
padding-bottom:20px;
float:left;
}
#contact h2 {
}
#contact table {
margin-bottom:15px;
margin-top: 20px;
border:none;
}
#contact table td {
padding-left: 0px;
border:none;
}
#contact table td:nth-child(odd) { width: 30%; }
#contact table td:nth-child(even) { word-break: break-word; }
#contact h4 {
font-weight:bold;
margin-top:15px;
color: black;
font-size: .875em;
}
.twitter-follow-button { margin-top: 10px; margin-bottom: 10px; float: left; }
#contact b {
margin-right:15%;
}
#contact p {
font-size: 14px; font-size:.875rem; /* 14px / 16px */
line-height:1.5em;
margin:0px;
border-bottom: 1px dotted #CCC;
}
#contact p:last-child { border-bottom:none; }
#background {
width: 100%;
float:left;
}
#background .callout { max-width: 23%; }
#background h4 { padding-top:20px; border-top: 1px dotted #a3a3a3; }
#background p { padding-bottom: 20px; margin:0; }
#background p:last-child { border:none; }
#section { float:left; }
/* School/College Footer
----------------------------------------------------*/
#inner {
background: #393939; /* Old browsers */
background: url(../img/Line-Diag-2-white50.png) 0 0 repeat, -moz-linear-gradient(-45deg, #393939 0%, #7f7f7f 100%); /* FF3.6+ */
background: url(../img/Line-Diag-2-white50.png) 0 0 repeat, -webkit-gradient(linear, left top, right bottom, color-stop(0%,#393939), color-stop(100%,#7f7f7f)); /* Chrome,Safari4+ */
background: url(../img/Line-Diag-2-white50.png) 0 0 repeat, -webkit-linear-gradient(-45deg, #393939 0%,#7f7f7f 100%); /* Chrome10+,Safari5.1+ */
background: url(../img/Line-Diag-2-white50.png) 0 0 repeat, -o-linear-gradient(-45deg, #393939 0%,#7f7f7f 100%); /* Opera 11.10+ */
background: url(../img/Line-Diag-2-white50.png) 0 0 repeat, -ms-linear-gradient(-45deg, #393939 0%,#7f7f7f 100%); /* IE10+ */
background: url(../img/Line-Diag-2-white50.png) 0 0 repeat, linear-gradient(135deg, #393939 0%,#7f7f7f 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#393939', endColorstr='#7f7f7f',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
display: block;
}
#inner footer {
width: 100%;
z-index: 2;
font-weight:700;
float:left;
margin-top: 15px;
color: #FFF;
}
#inner footer h3 {
float: left;
font-weight: 300;
color: #FFF;
margin: 0px 25px 10px 10px;
}
#inner footer strong { font-weight: 800; }
#inner hr {
float: left;
margin: 0;
border: none;
border-bottom: 3px solid #73000A;
position: relative;
z-index: 9999;
}
.uniticons {
margin-top: 3px;
color: #535456;
font-style: normal;
font-weight: 700;
font-size:0.75em; /* 12px / 16px */
padding-left:0;
float:left;
margin-right: 35%;
}
.uniticons li {
display: inline;
margin-bottom: 0px;
float:left;
padding-left:10px;
margin-right:15px;
line-height: 2em;
}
.uniticons li a { background-image:url(../img/icons/unit_icons_sprite.svg); background-repeat:no-repeat; color:#FFF; }
.uniticons li a:hover { color:#d0da00; }
.no-svg .uniticons li a { background-image:url(../img/icons/unit_icons_sprite.png); }
.uniticons li .unit-social { background: none; background-repeat:no-repeat; }
.uniticons li .location { background-position: 0 0; }
.uniticons li .location:hover { background-position: 0 -124px; }
.uniticons li .contact { background-position: 0 -31px; }
.uniticons li .contact:hover { background-position: 0 -155px; }
.uniticons li .give { background-position: 0 -62px; }
.uniticons li .give:hover { background-position: 0 -186px; }
.uniticons li .calendar { background-position: 0 -93px;}
.uniticons li .calendar:hover { background-position: 0 -217px; }
.uniticons li .directory { background-position: 0 -247px;}
.uniticons li .directory:hover { background-position: 0 -278px; }
.uniticons a {
display: block;
padding-left: 25px;
}
.unit-social {
padding-right: 95px;
position: absolute;
right: 0;
bottom:17px;
}
.unit-social:after {
background: url(../img/icons/socialmedia_sprite.png);
height: 56px;
width: 91px;
content: "";
position: absolute;
right: 0;
bottom: -17px;
}
.unit-social:hover:after { background-position: 0 -60px; height: 67px; }
/* Global Footer/Nav
----------------------------------------------------*/
#footerbg {
margin-top: 50px;
position: relative;
border-top: 3px black solid;
background: #000 url(../img/gates.svg) no-repeat -400px bottom;
}
.no-svg #footerbg { background: #000 url(../img/gates.png) no-repeat -400px bottom; }
#footer-menu {
position: absolute;
right: 0;
top: -26px;
width: 70px;
color: #FFF;
border-radius: 10px 10px 0 0;
text-align: right;
padding-right: 15px;
padding-top: 4px;
font-size: 14px;
background-color: #000;
}
.closed:before, .open:before {
content: "";
position: absolute;
top: 5px;
left: 10px;
width: 16px;
height: 16px;
background-image: url(../img/expand_sprite.svg);
background-repeat: no-repeat;
}
.no-svg .closed:before, .no-svg .open:before { background-image: url(../img/expand_sprite.png); }
.closed:before { background-position: 0px -83px; }
.open:before { background-position: 0px -109px; }
#sitemap {
display:none;
margin-bottom: 15px;
padding-top: 50px;
padding-bottom: 50px;
float: left;
color: #fff;
}
#sitemap h1 {
color: #FFF;
font-size: 14px; font-size: .875rem;
font-weight: bold;
margin-bottom: 5px;
width: 100%;
padding: 5px 5px 5px 8px;
background-color: #73000a;
border-radius: 0 15px 0 0;
}
#sitemap ul { padding: 0 0 0 8px; margin: 10px 0 40px; }
#sitemap ul li {
font-size:.75em; /* 12px / 16px */
font-weight: 600;
margin-bottom: 7px;
padding-bottom: 5px;
line-height: 1.3em;
list-style:none;
}
#logo-footer {
background: rgb(80,0,4); /* Old browsers */
background: -moz-linear-gradient(top, rgba(80,0,4,1) 0%, rgba(115,0,10,1) 55%, rgba(115,0,10,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(80,0,4,1)), color-stop(55%,rgba(115,0,10,1)), color-stop(100%,rgba(115,0,10,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(80,0,4,1) 0%,rgba(115,0,10,1) 55%,rgba(115,0,10,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(80,0,4,1) 0%,rgba(115,0,10,1) 55%,rgba(115,0,10,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(80,0,4,1) 0%,rgba(115,0,10,1) 55%,rgba(115,0,10,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(80,0,4,1) 0%,rgba(115,0,10,1) 55%,rgba(115,0,10,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#500004', endColorstr='#73000a',GradientType=0 ); /* IE6-9 */
}
#logo-footer .logo {
background: url('../img/USC_Web_linear.svg') no-repeat;
width: 268px;
height: 53px;
margin: 25px 0;
display: block;
}
.no-svg #logo-footer .logo { background-image: url('../img/USC_Web_linear.png') }
#logo-footer small {
font-size:.625em; /* 10px / 16px */
margin-bottom:5px;
border-right:solid 1px #FFF;
clear: both;
}
#logo-footer small:last-child { border:none; }
#logo-footer, #logo-footer small a { color: #FFF; }
.site-info-wrapper {
background-color: #000;
padding: 10px 0;
border-top: 1px solid #FFF;
}
.site-info {
position: relative;
z-index: 1;
}
.copyright { float: left; }
.page-owner { float: right; }
.no-limits {
float: right;
color:#FFF;
font-size: 1.375em; /* 22px / 16px */
font-family: Arvo, serif;
font-weight: 400;
margin-top: 47px;
}
.no-limits strong, .no-limits span { display: inline; }
.links {
padding-left: 10px;
margin-left: 10px;
box-sizing: border-box;
}
.links a:link, .links a:visited { color:#FFF; }
.links a:hover { color:#818701; }
/***** Global Classes *****/
.img-left { float:left; margin:0 30px 30px 0; border:none; }
.img-right { float:right; margin:0 0 30px 30px; border:none; }
.clear { clear:both; }
.float-left { float:left; }
.float-right { float:right; }
.text-big { color:#a2bd30; font-weight:bold; line-height:26px; }
.text-left { text-align:left; }
.text-right { text-align:right; }
.text-center { text-align:center; }
.text-justify { text-align:justify; }
.normal { font-weight:normal; }
.bold { font-weight:bold; }
.italic { font-style:italic; }
.underline { border-bottom:1px solid; }
.highlight { background:#ffc; }
.paddingright { padding-right:10px; }
.nopadding { padding:0; }
.noindent { margin-left:0; padding-left:0; }
.nobullet { list-style:none; list-style-image:none; }
.block { display:block; }
.hidden { display:none; }
.visuallyhidden { border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px; }
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus { clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto; }
.hide { display:none; }
/* Clean up on isle 6 ----------- */
.container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix:before,
.clearfix:after,
.row:before,
.row:after { content:'\0020'; display:block; overflow:hidden; visibility:hidden; width:0; height:0; }
.row:after, .clearfix:after { clear:both; }
.row,
.clearfix { zoom:1; }