/*******************************************************************************************************
  -- CAS SHARED CSS --
  All CSS in this document affects all websites using the Uber template.
*******************************************************************************************************/


/* Use Google Montserrat font for headings */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: Montserrat, Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-weight: 600;
}

/*******************************************************************************************************
 CAS Header
*******************************************************************************************************/

.header-logos .logo-osu, .header-logos-mobile .logo-osu {
    float: left;
	padding-top: 12px;
	margin-right: 10px;
}

.header-logos .logo-osu.cas-branding-on, .header-logos-mobile .logo-osu.cas-branding-on {
	padding-top: 20px;
}

.header-titles {
	position: relative;
	margin-left: 115px;
}
.header-titles > div {
	padding-top: 28px;
	width: 100%;
}
.header-titles > div.cas-branding-on {
	padding-top: 18px;
	padding-bottom: 5px;
}
.header-titles > div > div.cas-brand a {
	font-family: Roboto, sans-serif;
	font-size: 20px;
	line-height: 24px;
	color: #999;
}
.header-titles > div > div.site-brand a {
	font-family: Roboto, sans-serif;
	font-weight: normal;
	font-size: 30px;
	line-height: 30px;
	color: white;
}
.header-titles > div > div.site-brand img {
	max-width: 100%;
}

/* Phone */
@media (max-width: 767px) {
	.header-logos {
	    display: none;
	    visibility: hidden;
	}
	.header-titles > div > div.cas-brand {
		text-align: center;
	}
	.header-titles > div > div.cas-brand a {
		font-size: 18px;
		color: #eee;
	}
	.header-titles > div > div.site-brand {
		text-align: center;
	}
	.header-titles > div > div.site-brand a {
		font-size: 24px;
	}
	.header-titles > div {
		position: relative;
		bottom: auto;
		padding-top: 14px;
	}
	.header-titles > div.cas-branding-on { padding-top: 10px; }
	.header-logos-mobile .logo-osu { margin: 0; }
	.uber-header .container .row { margin: 0 -15px; }
	.header-logos-mobile .logo-osu {
		width: 70px;
	}
	.header-titles {
		margin-left: 75px;
	}
}
/* Desktop */
@media (min-width: 768px) {
	.header-logos-mobile {
	    display: none;
	    visibility: hidden;
	}
}

/* End: STYLE-DEPARTMENT */

/*******************************************************************************************************
  Home Page Slideshow
*******************************************************************************************************/

.carousel .hero-content {
  background: rgba(0,0,0,0.5);
  padding: 30px 40px;
}
.carousel .hero-content .hero-heading {
  font-weight: bold;
  font-size: 30px;
  margin-bottom: 0px;
}
.carousel .acm-hero { padding: 0 !important; }
.carousel div.hero-content {
  position: absolute;
  bottom: 60px;
  width: auto;
  min-width: 400px;
  max-width: 400px;
  border-radius: 0px 20px 20px 0px;
}
/* Larger circle icons at the bottom of the home page slideshow */
.carousel-indicators li { width: 20px; height: 20px; border-width: 2px; }
.carousel-indicators .active { width: 22px; height: 22px; }
.carousel-control { top: inherit; bottom: 30px; }
@media (max-width: 767px) {
  .carousel div.hero-content {
    width: 100%;
    position: relative;
    bottom: 0;
    background: #333;
    padding: 10px 20px;
    min-width: auto;
    border-radius: 0px 0px 0px 0px;
  }
  .acm-container-slide .carousel .carousel-indicators {
    position: relative;
    bottom: 0;
    left: 0;
    width: 100%;
    margin: 0;
    background: #333;
  }
  .acm-container-slide .carousel .carousel-control { 
    font-size: 40px;
    z-index: 20;
    bottom: 12px;
  }
  .carousel .acm-hero .hero-content {
    text-align: center;
  }
  .carousel .acm-hero .hero-content .hero-heading {
    margin-bottom: 10px;
  }
  .carousel .acm-hero .hero-content .hero-btn-actions {
    margin-top: 10px;
  }
  .carousel .acm-hero .hero-content .hero-btn-actions .btn {
    margin: 0 0 5px 0;
  }
  .acm-container-slide .carousel .carousel-control .fa {
    top: 25%;
  }
}

.carousel div.hero-content .no-box {
	background: rgba(0,0,0,0);
}

/* Reduce width of main slideshow */
#acm-slideshow-397 {
  max-width: 1170px;
  margin: 0 auto;
}
/*
}
.carousel-inner {
	max-width: 1170px;
	margin: 0 auto;
}
*/
/* Dark background around slideshow */
#section-397 { background: #27292e; }


/* Slide links (from custom Villain acm module) */
a.slide-heading-link,
a.slide-heading-link:hover,
a.slide-heading-link:active,
a.slide-heading-link:visited { color: inherit; text-decoration: none; }
img.slide-image-link {}


/* Apply Now button at top of major articles */
a.btn-applynow {
  background: #ff6600;
  display: block;
  padding: 10px;
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  color: white;
  margin: 20px 0;
  font-family: Montserrat, sans-serif;
}
a.btn-applynow:hover { background-color: #ff7700; }

/*******************************************************************************************************
  Home Page modules - requires "-centerbox" as module class suffix.
*******************************************************************************************************/

.custom-centerbox {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0px 16px;
    clear: both;
}

.custom-centerbox h3 {
    border-top: 1px solid #ff6600;
    color: #ff6600;
    padding-top: 8px;
}


/*******************************************************************************************************
  Line Link - the links at the bottom of News and Events
*******************************************************************************************************/

.line-link {
    width: 100%;
    background-color: rgba(255, 102, 0, .4);
    text-align: center;
    vertical-align: middle;
    line-height: 1px;
    height: 1px;
}

.line-link a {
    background-color: white;
    padding: 0px 10px;
    font-family: Montserrat;
    font-weight: 500;
    font-size: 16pt;
}

.line-link a:hover {
  padding: 0px 30px;
}

/*******************************************************************************************************
  Info box - the map module on the main page
             Required == Module Class Suffix: -contactbox
*******************************************************************************************************/

.section-contactbox .info.top-right {
    border-radius: 16px;
}

.section-contactbox .info.top-right dt {
    font-weight: 600;
    font-size: 20px;
    font-family: Montserrat, sans-serif;
}

.section-contactbox .info.top-right dd {
    margin-left: 28px;
    letter-spacing: 0.5px;
}

@media (max-width: 767px) {
    .section-contactbox .info { top: 0px !important; right: 0px !important; margin: 20px; }
}


/*******************************************************************************************************
  Intro Box, Intro-Box-Head and Thin Title:
  Shaded box of text, with a thin header, align left.
  
  Simple thin title --
  <h3 class="thin-title"></h3>

  Intro Box with thin title and caps --
  <h3 class="thin-title intro-box-head caps"></h3>
  <div class="intro-box"><p></p></div>
*******************************************************************************************************/

.thin-title {
    font-size: 36px;
    color: #ff6600;
    font-weight: 400;
    letter-spacing: 4px;
}

.caps {
    text-transform: uppercase;
}

.intro-box {
    top: -18px;
    position: relative;
    padding: 26px 40px 32px 80px;
    margin: 0px 16px 0px -38px;
    letter-spacing: 0.6px;
    background: rgb(247, 237, 234);
}

/* Modifier with thin-title -- class="thin-title intro-box-head" */
.intro-box-head {
    position: relative;
    z-index: 1;
    letter-spacing: 6px;
    display: inline;
    background: none;
    padding-left: 40px;
}

@media (max-width: 767px) {
.intro-box-head {
        padding-left: 0px;
        font-size: 24px;
  }
.intro-box {
       margin: 0px 0px 0px -38px;
  }
}

/*******************************************************************************************************
 Floatbox
 -- TWO VERISONS: normal and 'flat'
  - Use in conjunction with Coursethumbs,
  - or use by itself
*******************************************************************************************************/

.floatbox {
    background-color: #eee;
    border-radius: 10px;
    box-shadow: 6px 6px 24px rgba(0,0,0,0.15);
}

.floatbox-flat {
    background-color: #eee;
    border-radius: 2px;
    box-shadow: 3px 3px 0 rgba(0,0,0,0.16);
}


/*******************************************************************************************************
   Footer: Custom module, module class suffix of "-footer", assigned to "acm-footer" module position.
*******************************************************************************************************/

.custom-footer {
    padding: 0px 16px;
    /* background: linear-gradient(135deg, rgba(230,222,215,1) 0%,rgba(255,255,255,1) 50%,rgba(230,222,215,1) 100%); */
    background: rgb(255, 253, 251);
    box-shadow: inset 0px 8px 18px -11px rgba(0, 0, 0, 0.4);
    color: rgb(160, 150, 145);
    text-align: center;
    font-family: Montserrat, sans-serif;
    font-size: 9pt;
}

.custom-footer h3 {
	margin: 0px;
    padding: 24px 0px 4px 0px;
    letter-spacing: 6px;
    font-family: Montserrat, sans-serif;
    font-weight: 500;
    font-size: 18pt;
}

.custom-footer p.address {
	margin-bottom: 7px;
	font-size: 12pt;
	letter-spacing: .5pt;
}

.custom-footer p.copyright {
	margin-bottom: 13px;
}

.custom-footer a.social-button,
.custom-footer a.social-button:hover,
.custom-footer a.social-button:active,
.custom-footer a.social-button:focus {
  text-decoration: none;
  border: none;
  margin: 0px 6px;
}

.custom-footer a.social-button i {
  background: rgb(160, 150, 145);
  border-radius: 50%;
  color: white;
  font-size: 18px;
  line-height: 36px;
  height: 36px;
  width: 36px;
}

.custom-footer a.social-button i:hover {
  background: #ff6600;
}

.custom-footer p.hashtag {
    color: #ff6600;
    font-size: 14pt;
    letter-spacing: 4pt;
    margin-top: -8pt;
}
.floatbox:after, .floatbox-flat:after {
    content: "";
    display: table;
    clear: both;
}

/*********************************************************************************************************
   Footer: Custom module, module class suffix of "-footer-dept", assigned to "acm-footer" module position.
*********************************************************************************************************/

.custom-footer-dept {
    padding: 0px 16px;
    /* background: linear-gradient(135deg, rgba(230,222,215,1) 0%,rgba(255,255,255,1) 50%,rgba(230,222,215,1) 100%); */
    background: rgb(255, 253, 251);
    box-shadow: inset 0px 8px 18px -11px rgba(0, 0, 0, 0.4);
    color: rgb(160, 150, 145);
    text-align: center;
    font-family: Montserrat, sans-serif;
    font-size: 9pt;
}

.custom-footer-dept h3 {
	margin: 0px;
    padding: 24px 0px 4px 0px;
    letter-spacing: 6px;
    font-family: Montserrat, sans-serif;
    font-weight: 500;
    font-size: 18pt;
}

.custom-footer-dept p.address {
	margin-bottom: 7px;
	font-size: 12pt;
	letter-spacing: .5pt;
}

.custom-footer-dept p.copyright {
	margin-bottom: 13px;
}

.custom-footer-dept a.social-button,
.custom-footer-dept a.social-button:hover,
.custom-footer-dept a.social-button:active,
.custom-footer-dept a.social-button:focus {
  text-decoration: none;
  border: none;
  margin: 0px 6px;
}

.custom-footer-dept a.social-button i {
  background: rgb(160, 150, 145);
  border-radius: 50%;
  color: white;
  font-size: 18px;
  line-height: 36px;
  height: 36px;
  width: 36px;
}

.custom-footer-dept a.social-button i:hover {
  background: #ff6600;
}

.custom-footer-dept p.hashtag {
    color: #ff6600;
    font-size: 14pt;
    letter-spacing: 4pt;
    margin-top: -8pt;
}

/**********************************************************
   Table Formatting
   wrap in <div class="courses-box"><table class="courses"> 
 **********************************************************/

.courses-box .title
{
	font-size: 1.75em;
	font-weight: bold;
	margin-bottom: 1em;
}

.courses-box table.courses
{
	border-collapse: collapse;
	border: none;
	width: 100%;
}

.courses-box table.courses tbody tr.group,
.courses-box table.courses tbody tr.group td {
	border-top: none;
}

.courses-box table.courses tbody td
{
	text-align: left;
	padding: 2px 3px;
	vertical-align: top;
}

.courses-box table.courses thead th
{
	text-align: left;
	padding: 6px 3px;
}

.courses-box table.courses thead tr
{
	background-color: #ff6600;
	border: 1px solid #ff6600;
	color: white;
}