/* - - CUSTOM STYLE SHEET 				  - - */
/* - - developed for SMU Calendar (go.activecalendar.com) - - */
/* - - updated 2017-04-28; Beth Andresen, OIT unicorn     - - */

/* - - LOGIN BAR AT TOP OF PAGE - - */
#main {
	padding: 0 0 10px;
	margin: 0 !important;
	height: 35px;
}

#main ul li a {
	color: white !important;
}

#main ul li a:hover {
	color: white;
	text-decoration: underline;
}

/* - - LOGO AND IDENTITY  - - */

#logo {
	padding: 15px 7px; 
}

#logo a  {
	float: none;
	max-width: 320px;
	width: 100%;
}

/* - - Custom SMU navigation - - */
#main-navigation {
    padding: 0 0 10px 15px;
}

#main-navigation li {
    display: inline-block;
    list-style: none;
}

#main-navigation a {
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 300;
    margin-right: 30px;
    text-decoration: none;
}

#main-navigation a:hover {
    text-decoration: underline;
}

.departmentName {
    color: #333333;
    text-align: center;
    padding-top: 15px;
    padding-bottom: 15px;
    font-size: 24px;
    margin-bottom: 0;
    border-bottom: 1px solid #dddddd;
    margin: 0 0 11px;
}

#main-navigation .mobile {display: none}

@media only screen and (max-width: 768px) {
	#main-navigation li {display: none}
	#main-navigation li.mobile {display: inline-block !important}
	
}

@media only screen and (max-width: 480px) {
	#main-navigation {display: none}
}

/* - - CALENDAR NAME - - */

#header-slogan {
	font-weight: 300;
	font-size: 30px;
	line-height: 40px;
	margin-bottom: 10px;
	color: #9f2a1e;
	float: none;
	text-transform: none;
	text-align: left;
}

@media only screen and (max-width: 980px) {
	#header-slogan {padding-left: 15px}
}

@media only screen and (max-width: 480px) {
	#header-slogan {display: block; font-size: 24px; margin: 0}
	#featuredEvents {margin-bottom: 0}
	#mobile-nav-link {background-image: url('https://sites.smu.edu/oit/activecalendar/images/mobile-nav.png');}
}

/* - - PAGE CONTENTS, WRAPPERS, AND COLOR - - */

body {
    font-family: "Open Sans", sans-serif;
}

.wrap {
	max-width: 1170px;
}

.wrap.main {
        max-width: 1140px;
}

#main-content, #sidebar {
        max-width: 100%;
}

nav#view-type ul li h3, .wrapper-dropdown, #search-link {
	font-size: 18px;
	color: #333333;
	text-transform: none;
}

#search_range {
	color: #9f2a1e;
	text-transform: none;
}

.list2 #main-content h3 {
	background-color: #32498e;
	margin-bottom: 0px;
	margin-top: 13px;
}

.list-event-preview h3 a {
    	color: #32498e;
}	

.list2 .list-event:nth-of-type(2n+1) {
	background-color: #EFEFEF;
}

.list-event-preview p {
	color: #666;
	line-height: 18px;
}

#sitefooter {
	display: none
}

.list-event-locale a {
	color: #5395b7
}

.list-event-locale a:hover {
	color: #CC0035; 
	text-decoration: underline
}

.list-event-link a {
	background-color: #32498e
}

#calendar-month {
	background-color: #32498e
}

#featuredEvents ul li a img {
    height: auto !important;
}

/* - - CUSTOM CALENDAR LIST ADDED TO SIDEBAR VIA JAVASCRIPT - - */

#sidebar h3 {
	color: #333;
	text-transform: none;
    text-align: left;
}

.dept {
	text-align: left;
}

.dept-list {
	padding-left: 0;
}

.dept-list li a {
	font-size: 13px !important; 
	text-transform: none !important;
	color: #333 !important;
}

.dept-list li a:hover {
	text-decoration: underline;
}

@media only screen and (max-width: 750px) {	
	
#sidebar h3 {
	color: #333 !important;
	text-transform: none !important;
    text-align: left !important;
}

.dept {
	text-align: left !important;
	margin-left: 0 !important;
}

.dept-list {
	padding-left: 0 !important;
	text-align: left !important;
}

.dept-list li a {
	font-size: 13px !important; 
	text-transform: none !important;
	color: #333 !important;
}

.dept-list li a:hover {
	text-decoration: underline;
}	
	
#sidebar ul li {
		display: block !important;
	}
}

@media only screen and (max-width: 480px) {	
	#sidebar section {margin-bottom: 20px !important}	
}

/* - - MEDIA QUERIES - - */

@media only screen and (max-width: 980px) {
	#top-main .wrap {width: 100% !important}
} /* max-width: 980px */

@media only screen and (max-width: 480px) {
	nav#main ul {background-color: black;}
	#main {padding-bottom: 0;}
	#logo {padding: 15px 7px;}
	#top-main {width: 100% !important}
} /* max-width: 980px */


/* - - FOOTER ELEMENTS - - */

#site-footer {
    background-color: #58595b;
    color: #FFFFFF;
    margin-top: 30px;
}

.cta-buttons {
    text-align: center;
    padding-top: 30px;
}

#site-map {
    margin-top: 20px;
    margin-bottom: 20px;
}

.footer-menu {
    margin-top: 30px;
    margin-bottom: 30px;
}

#site-map, .footer-container {
	margin-right: auto;
	margin-left: auto;
	padding-left: 15px;
	padding-right: 15px;
}

.footer-menu h3 {
    color: #FFFFFF;
    text-transform: uppercase;
    border-bottom: 2px solid #808182;
    font-size: 16px;
    padding-bottom: 5px;
    margin-top: 0;
	margin-bottom: 10px;
}

.footer-menu a {
    color: #FFFFFF;
    font-size: 13px;
	text-decoration: none;
}

.footer-menu a:hover {
	text-decoration: underline;
}

.menu {
    padding-left: 0;
    margin-bottom: 0;
}

.menu li {
	list-style-type: none;
	line-height: 22.5px;
}

 #site-map::before, .footer-container::before, #site-map::after, .footer-container::after, .footer-row::before, .footer-row::after {
    content: " ";
    display: table;
}

*::before, *::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;}

#site-footer .cta-buttons a {
    width: 94px;
    margin-left: 10px;
    margin-right: 10px;
    font-size: 15px;
}
.cta-buttons a {
    background-color: #FFFFFF;
    border-color: #FFFFFF;
    display: inline-block;
    color: #333333;
}

.cta-buttons a:hover {
	background-color: #e6e6e6; 
	color: #CC0035;
}
.btn, .feed-section-footer a, .cta-buttons a {
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
	text-decoration: none;
}

#site-info {
    background-color: #404041;
    padding: 20px;
    text-align: center;
}

.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
}

.site-logo, .smu-info {
    text-align: left;
}

.site-logo {
    display: block;
    max-width: 330px;
    margin: 0 auto 15px;
}

.smu-info a {
    color: #FFFFFF;
    font-size: 11px;
    display: inline-block;
    margin-right: 5px;
    text-decoration: none;
}

.smu-info .site-address {
    font-size: 11px;
    color: #919396;
    margin-bottom: 20px;
    font-style: normal;
    line-height: 1.42857;
}

.menu {
    padding-left: 0;
    margin-bottom: 0;
}
.socials {
    padding: 0;
}

.menu .menu-item {
    list-style: none;
}
.socials .menu-item {
    display: inline-block;
    padding-left: 8px;
    padding-right: 8px;
}
.socials .menu-item .menu-link {
    color: #FFFFFF;
    font-size: 24px;
}

@media screen and (min-width: 992px) { 
    .footer-menus .footer-menu:nth-child(2), .socials { width: 25%; float: left; padding: 0 15px; box-sizing: border-box;}
    .footer-menus .footer-menu:last-child, .site-logo { width: 33.33333%; float: left; padding: 0 15px; box-sizing: border-box;}
    .footer-menus .footer-menu:first-child, .smu-info { width: 41.66667%; float: left; padding: 0 15px; box-sizing: border-box;}
	.footer-menus, .footer-row {margin: 0 -15px;}
}

@media (max-width: 480px) {
	#logo {background-color: #354ca1}
}

@media (min-width: 481px) {
	#top-main {background-repeat: repeat-x; background-image: url('https://sites.smu.edu/oit/activecalendar/images/smu-header-background.png'); min-height: 174px}
	#logo {padding-left: 15px}
}

@media (min-width: 768px) { 
	.footer-container, #site-map { width: 770px; box-sizing: border-box;} }

@media (min-width: 992px) { 
	.footer-container, #site-map { width: 970px; box-sizing: border-box;} }

@media (min-width: 1200px) { 
	.footer-container, #site-map { width: 1170px; box-sizing: border-box;} 
}

@media (max-width: 991px) {
	.smu-info {
		display: inline-block;
		text-align: center;
	}
	
	footer {text-align: left}
}