/*------------------------------ 
	Template I 
	Dundee Community Schools
	Blue: #254a9f
--------------------------------*/

/*
===========================================================
 HEADER
===========================================================
*/
.fbcms_header
{
    border-top: 40px solid #254a9f;
    margin-top: 12px;
    border-bottom: solid 6px #223a6f;
}
@media only screen and (min-width: 768px) 
{
    .fbcms_header
    {
        box-shadow: none;
    }
	.fbcms_header .header_main {
        height: 123px;
        margin-top: -42px;
    }
    .fbcms_content.site_script_head {
	 	top: 56px;
	    right: 0;
	}
}
@media only screen and (min-width: 994px) 
{
}

/* Logo */
.site_logo {
}
.site_logo_text {
}
@media only screen and (min-width: 768px)
{
    .site_logo {
        margin: 10px 0 0 0;
    }
    .site_logo_text {
        margin: 0 0 0 10px;
    }
}

/* Search */
.search-form .submit
{
	background-color: #000000;
}
/* END Search */

/* Social Media Script */
.fbcms_content .social_media_list a {
    color: #254a9f;
}
.fbcms_footer .fbcms_content .social_media_list a {
    color: #fff;
}

/*
===========================================================
 END HEADER
===========================================================
*/

/*
===========================================================
 MENUS
===========================================================
*/

/* Head Menu */
@media only screen and (min-width: 768px)
{
    .menu_head a
    {
        color: #fff;
        background-color: #254a9f;
    }
}
/* Focus Menu */
@media only screen and (min-width: 768px)
{
    .menu_focus a
    {
        color: #254a9f;
    }
}

/* Quicklinks Menu */
@media only screen and (min-width: 768px)
{
    .fbcms_header .drop-nav .menu_title
    {
        color: #254a9f;
        background-color: #ddd;
    }

    .fbcms_header .drop-nav .simplemenu_container
    {
        background-color: #fff;
    }
    .fbcms_header .drop-nav .simplemenu_container a
    {
        color: #254a9f;
    }
    .fbcms_header .drop-nav .simplemenu_container a:hover,
    .fbcms_header .drop-nav .simplemenu_container a:focus
    {
        color: #fff;
        background: #254a9f;
    }
}

/* Foot Menu */
@media only screen and (min-width: 768px)
{   
    .menu_foot li
    {
    }
}

/* main-nav */
@media only screen and (min-width: 768px)
{
	.top_level_item {
	    margin: 0 20px;
	}
    .main-nav .top_level_item .top_level_link
    {
        color: #254a9f;
    }
	.main-nav .top_level_item.active .top_level_link,
	.main-nav .top_level_item:hover .top_level_link, 
	.main-nav .top_level_item.hoverfocus .top_level_link
	{
		color: #254a9f;
		border-bottom-color: #254a9f;
	}
    
    /* drop-down */
    .main-nav .top_level_item > .drop {
	    width: 230px;
	}
    .main-nav .top_level_item > .drop a 
    {
        color: #254a9f;
    	font-size: 1rem;
    	line-height: 1.2;
    	padding: 8px 12px;
    }
	.main-nav .top_level_item > .drop li a:hover, 
	.main-nav .top_level_item > .drop li a:focus {
    	background-color: #254a9f;
	}
}

/* nav slider */
@media only screen and (max-width: 767px) {
    .header_liner > .slider-opener.changerbutton:before, 
    .header_liner > .slider-opener.changerbutton:after, 
    .header_liner > .slider-opener.changerbutton span {
        background-color: #fff;
    }
}

/* Side Navigation Menu */
@media only screen and (min-width: 768px)
{
    .side-nav
    {
        background-color: #254a9f;
    }
    .side-nav .sidelist_0 > li > a
    {
        color: #fff;
    }
    .side-nav .sidelist_1 a
    {
        color: #fff;
    }
    .side-nav .sidelist_1 a:hover,
    .side-nav .sidelist_1 a:focus,
    .side-nav .sidelist_1 .current_item > a
    {
        color: #fff;
    }
    .side-nav .sidelist_1 a:hover::before,
    .side-nav .sidelist_1 a:focus::before,
    .side-nav .sidelist_1 .current_item > a::before
    {
        color: #fff;
    }
    .side-nav:after
    {
        content: "";
        position: absolute;
        top: 0;
        height: 100%;
        left: 0;
        width: 100%;
        background: transparent url(../img/viking-logo.png) no-repeat bottom 12px right 12px;
        background-size: 50% auto;
        opacity: .3;
    }
}
/* END Side Navigation Menu */
/*
===========================================================
 END MENUS
===========================================================
*/

/*
===========================================================
 MAIN CONTENT FRAMEWORK
===========================================================
*/
@media only screen and (min-width: 768px)
{
    .page_interior .main_content::before {
        background: #ECECEC;
    }
}

.page_home .main_content .columns h2 {
    background-color: #254a9f;
}
/* Focus/Welcome Areas */
.main_focus {
    background: #eee;
}
.focus_split .home_welcome
{
    background-color: #254a9f;
    color: #ffffff;
}
@media only screen and (min-width: 768px)
{  
}

/* Page Home specific */
.page_home .main_content .fbcms_component:nth-child(1)
{
    background-color: #fff;
}
.page_home .main_content .fbcms_component:nth-child(2)
{
    background-color: #fff;
}
.page_home .main_content .fbcms_component:nth-child(3)
{
    background-color: #fff;
}
.page_home .main_content .fbcms_component:nth-child(4)
{
    background-color: #254a9f;
    color: #fff;
}     
.page_home .main_content .fbcms_component:nth-child(4) *
{
    color: #fff;
}

@media only screen and (min-width: 768px)
{
	.page_home .flexi .flexi1.fbcms_content
	{
		padding: 60px 0;
		text-align: center;
	}

    .page_home .main_content .fbcms_component:nth-child(5)
    {
    	padding-bottom: 30px;
    }
    /* Home Page sections can recieve background images like this: (set 10 to appropriate number) */
    .page_home.full_focus .main_content .fbcms_component:nth-child(2),
    .page_home.focus_split .main_content .fbcms_component:first-child
    {
        position: relative;
        background-color: #fff;
    }
    .page_home.full_focus .main_content .fbcms_component:nth-child(2):after,
    .page_home.focus_split .main_content .fbcms_component:first-child:after
    {
        content: "";
        position: absolute;
        left: 0;
        right:0;
        top: 0;
        bottom: 0;
        background: url('../img/District.png') no-repeat center;
        background-size: cover;
        opacity: 0.4;
        z-index: 1;
    }
    .page_home.full_focus .main_content .fbcms_component:nth-child(2) .component_liner,
    .page_home.focus_split .main_content .fbcms_component:first-child .component_liner
    {
        z-index: 2;
        position: relative;
    }
}
@media only screen and (min-width: 994px)
{
	.page_home .flexi .flexi1.fbcms_content
	{
		padding: 80px 0;
	}
}

/* Home Quicklink Blocks */
.home_quicklinks.fbcms_richtext a
{
    text-decoration: underline;
    color: #fff;
}
.home_quicklinks.fbcms_richtext a:hover,
.home_quicklinks.fbcms_richtext a:focus
{
    text-decoration: none;
    color: #fff;
}
/*  Optional: Make Icons Circles - 
    change font-size to change all proporitons */
.home_quicklinks.fbcms_richtext .fa
{
    background-color: #666;
    color: #fff;
    font-size: 3rem; 
    width: 1.833em;
    padding: 0.4em;
    border-radius: 50%;
}
.home_quicklinks.fbcms_richtext a:hover .fa,
.home_quicklinks.fbcms_richtext a:focus .fa
{
    background-color: #000;
    color: #fff;
}

/*
===========================================================
 END MAIN FRAMEWORK
===========================================================
*/

/* footer */
.fbcms_footer
{
    background-color: #222;
    color: #fff;
}
.fbcms_footer a {
    color: #fff;
}
.fbcms_footer a:hover,
.fbcms_footer a:focus
{
}
.goog-te-gadget,
.goog-logo-link
{
    color: #fff !important;
}
.fbcms_footer .copyright
{
    border-right-color: #fff;
}
/* END FOOTER */

/*
-------------------------------------
 Rich Text Formatting
-------------------------------------
*/
a, 
.fbcms_spotlight_text .more_link, 
.fbcms_cards .fbcms_card_link {
    color: #254a9f;
}

h1
{
    color: #254a9f;
}
h2
{
    color: #254a9f;
}
h3
{
    color: #254a9f;
}
h4,
.fbcms_spotlight .desc_short,
.fbcms_cards .fbcms_card_name,
.fbcms_news_headlines .fbcms_article_title,
.fbcms_newscontent .newsarticle_title,
.fbcms_upcoming_events .event_title, 
.fbcms_upcoming_events .event_title a
{
    color:#254a9f;
}
h5
{
    color: #254a9f;}
h6
{
    color: #254a9f;
}
.content_intro
{    
    color: #666;
}
/*
-------------------------------------
 END Rich Text Formatting
-------------------------------------
*/

/*
===========================================================
 Calendar Styling
===========================================================
*/
/* Upcoming Events */

/* Calendar List */
.month_table .month_header
{
    background-color: #254a9f;
}
/* END Calendar List */

/* Calendar Grid */
.calendargrid .caltab .monthname
{
    color: #999999;
}
.calendargrid .caltab .dayofweek
{
    background-color: #254a9f;
}
.calendargrid .caltab .currentmonth .daynumber
{
    background-color: #333;
    color: #ffffff;
}
/* END Calendar Grid */

/* Small Calendar Grid */
.minigrid_verB {
    background: #fff;
    padding: 6px;
}
.minigrid_verB tbody,
.minigrid_verB .isDay
{
    border: none;
    font-size: 15px;
}
.fbcms_calendar_minigrid td
{
    line-height: 3;
}
.minigrid_verB .calendar_mini_controls {
    text-align: center;
}

.fbcms_calendar_mini .fbcms_calendar_mini_monthName,
.fbcms_calendar_mini .fbcms_calendar_mini_yearNumber
{
    font-weight: bold;
    color: #254a9f;
    font-size: 18px;
}

.fbcms_calendar_minigrid th {
    color: #191919;
}
.fbcms_calendar_mini .fbcms_calendar_mini_prevMonth,
.fbcms_calendar_mini .fbcms_calendar_mini_nextMonth
{
    background-color: #303133;
    color: #fff;
    border-radius: 50%;
    width: 26px;
    margin: 10px 6px;
}
.fbcms_calendar_mini .fbcms_calendar_mini_prevMonth
{
    float: left;
}
.fbcms_calendar_mini .fbcms_calendar_mini_prevMonth:hover,
.fbcms_calendar_mini .fbcms_calendar_mini_prevMonth:focus,
.fbcms_calendar_mini .fbcms_calendar_mini_nextMonth:hover,
.fbcms_calendar_mini .fbcms_calendar_mini_nextMonth:focus
{
    color: #ffffff;
    background-color: #161616;
}

.fbcms_calendar_mini .fbcms_calendar_mini_event 
{
    color: #254a9f;
    text-decoration: underline;
}

.fbcms_calendar_mini .today, 
.fbcms_calendar_mini .isDay:hover, 
.fbcms_calendar_mini .isDay:focus
{
    color: #ffffff;
    background-color: #254a9f;
}
/* END Small Calendar Grid */

/*
===========================================================
 END Calendar Styling
===========================================================
*/

/*
===========================================================
 Staff Styling
===========================================================
*/
.fbcms_staff_listing .email_icon,
.fbcms_staff_search .email_icon,
.fbcms_contact_email .email_icon,
.fbcms_staff_cards .fbcms_contentbody .email_icon  {
    background-color: #254a9f;
}
.fbcms_staff_listing_header,
.fbcms_staff_search_results .header {
	color: #333;
    font-weight: bold;
}

.page_onecol .fbcms_staff_cards .fbcms_contentbody .name
{
    font-size: 1.08em;
}
.page_onecol .fbcms_staff_cards .fbcms_contentbody .position
{
    font-size: .95em;
    font-weight: 400;
}
.page_onecol .fbcms_staff_cards .fbcms_contentbody .phone
{
    font-weight: 400;
    font-size: .9em;
}
.page_onecol .fbcms_staff_cards .fbcms_contentbody .send_email
{
    font-size: .95em;
}
@media only screen and (min-width: 768px)
{
	.fbcms_staff_cards > .fbcms_contentbody > .fbcms_staffentry {
	    width: calc(33.333% - 3px);
	    padding: 0 0.438em 0.875em;
	}
    .page_onecol .fbcms_staff_cards > .fbcms_contentbody > .fbcms_staffentry {
        width: calc(25% - 3px);
    }
}
@media only screen and (min-width: 994px)
{
    .page_onecol .fbcms_staff_cards > .fbcms_contentbody > .fbcms_staffentry {
        width: calc(20% - 3px);
    }
}
@media only screen and (min-width: 1200px)
{
    .page_onecol .fbcms_staff_cards > .fbcms_contentbody > .fbcms_staffentry {
        width: calc(16.666% - 3px);
    }
}
/*
===========================================================
 END Staff Styling
===========================================================
*/	

/*
===========================================================
 Pager Styling
===========================================================
*/
.pager a .btnResultNavigation
{
    background-color: #254a9f;
}

/*
===========================================================
 END Pager Styling
===========================================================
*/

/*
===========================================================
 Spotlight Styling
===========================================================
*/
/*
===========================================================
 END Spotlight Styling
===========================================================
*/

/*
===========================================================
 Expandable Content Styling
===========================================================
*/
.fbcms_ec_title
{
    background-color: #254a9f;
}
.fbcms_ec_title:hover,
.fbcms_ec_title:focus
{
    background-color: #333;
}
/*
===========================================================
 END Expandable Content Styling
/*===========================================================*/

.flyup_tab,
.flyup_slide
{
    background-color: #254a9f;
}