@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700);

/* ----------------------------------------------------------
    Birmingham-Shuttlesworth International Airport CSS
    Version 1.0

    TABLE OF CONTENTS
    
    GLOBAL RESPONSIVE STYLES

    01 - HIDDEN ELEMENTS
    02 - RESPONSIVE ICON/NAV BUTTONS
    03 - HEADER/ALERT STYLES
    04 - NAVIGATION STYLES
    05 - ROTATOR STYLES
    06 - FOOTER STYLES

    TABLET STYLES
    
    07 - LAYOUT
    08 - ROTATOR STYLES
    09 - ROTATOR OVERLAY STYLES
    10 - FLIGHT TRACKER STYLES
    11 - NEXT ARRIVAL/DEPARTURE STYLES
    12 - ARRIVAL/DEPARTURE STATUSES
    13 - MAGNET STYLES
    14 - SUBPAGE STYLES
    15 - SUBPAGE SIDEBAR STYLES
    16 - FOOTER STYLES

    MOBILE STYLES

    17 - HIDDEN ELEMENTS
    18 - BASE STYLES
    19 - LAYOUT
    20 - HEADER/ALERT STYLES
    21 - ROTATOR OVERLAY STYLES
    22 - FLIGHT TRACKER STYLES
    23 - ARRIVAL/DEPARTURE STATUSES
    24 - MAGNET STYLES
    25 - SUBPAGE STYLES
    26 - SUBPAGE SIDEBAR STYLES
    27 - FOOTER STYLES

    COLOR GUIDE (Main Site Colors and their Hex Codes)
    Main Gray: #3b3a3a
    Text Gray: #7c7c7c
    
    FONTS USED
    Main Copy (Home): Source Sans Pro
    Main Copy (Bulk): Arial, Helvetica, sans-serif
    Main Headers: Source Sans Pro
    Secondary Headers: Source Sans Pro
    
---------------------------------------------------------- */

@media only screen and (min-width: 961px) {

.nav-push,
.responsive-icons,
.search-nav-push,
.section-mobile,
ul.sidebar-push {display: none !important;}

}


/* BEGIN GLOBAL RESPONSIVE STYLES */


@media only screen and (max-width: 960px) {

/* 01 = HIDDEN ELEMENTS
---------------------------------------------------------- */

.nav,
.section-mobile {display: none;}


/* 02 = RESPONSIVE ICON/NAV BUTTONS
---------------------------------------------------------- */

.responsive-icons {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 9;
}

.responsive-icons .icon {
    cursor: pointer;
    display: block;
    float: left;
    height: 18px;
    padding: 13px 18px;
    width: 15px;
}

.responsive-icons .icon.search-icon {
    background: url(../images/icon-search.png) center center no-repeat;
    background-color: rgba(255,255,255,0.2);
}

.responsive-icons .icon.nav-icon {
    background: url(../images/icon-menu.png) center center no-repeat;
    background-color: rgba(255,255,255,0.2);
    margin-right: 1px;
}

.responsive-icons .icon.active {
    background-color: #3b3a3a;
    cursor: pointer;
}

/* 03 = HEADER/ALERT STYLES
---------------------------------------------------------- */


/* 04 = NAVIGATION STYLES
---------------------------------------------------------- */

.nav-push {
    background: url(../images/shadow-upper.png) left top repeat-x #3b3a3a;
    display: none;
    font-size: 14px;
    font-weight: 600;
    list-style: none;
    margin: 0;
    padding: 0 0 10px;
    left: 0;
    top: 0px;
    width: 100%;
    z-index: 9;
}

.nav-push li {float: none;}

.nav-push li a {
    color: #fff;
    display: block;
    padding: 8px 18px;
}

.nav-push li a.active,
.nav-push li a:hover {
    background-color: #333;
}

.search-nav-push {
    background: url(../images/shadow-upper.png) left top repeat-x #3b3a3a;
    display: none;
    height: 50px;
    line-height: 50px;
    padding: 0 20px;
}

.search-nav-push input {
    background: #3b3a3a;
    border: none;
    color: #fff;
    font-size: 14px;
    font-style: italic;
    font-weight: 600;
    height: 25px;
    line-height: 25px;
    width: 100%;
}

/* 05 = ROTATOR STYLES
---------------------------------------------------------- */

.shadow-rotator {bottom: 50px;}


/* 06 = FOOTER STYLES
---------------------------------------------------------- */

.footer p,
.footer ul {font-size: 11px;}


/* END GLOBAL RESPONSIVE STYLES */
}



/* BEGIN TABLET VIEW */

@media only screen and (min-width: 568px) and (max-width: 960px) {

/* 07 = LAYOUT
---------------------------------------------------------- */

.global-width {width: 768px;}

.full-wrapper,
.full-wrapper-alert,
.full-wrapper-sub {min-width: 768px;}

.sidebar-push {display: none !important;}

.swipe-btns {
    display: none;
}

/* 08 = ROTATOR STYLES
---------------------------------------------------------- */

.rotator {
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}

/* 09 = ROTATOR OVERLAY STYLES
---------------------------------------------------------- */

.rotator-overlay {
    background: url(../images/rotator-overlay-small.png) no-repeat 120px 40px;
    bottom: 15%;
    min-height: 517px;
    right: 10px;
    width: 673px;
}

.main-header,
.birmingham-weather {margin: 0 45px 0 0;}

.main-header {margin-top: 165px;}


/* 10 = FLIGHT TRACKER STYLES
---------------------------------------------------------- */

.flight-tracker {margin: 30px 25px 0 0;}


/* 11 = NEXT ARRIVAL/DEPARTURE
---------------------------------------------------------- */

.next-arrival-departure table {
    font-size: 12px;
    margin: 0 15px;
    width: 350px;
}

.next-arrival-departure td.next-arrival,
.next-arrival-departure td.next-departure {width: 140px;}


/* 12 = ARRIVAL/DEPARTURE STATUSES
---------------------------------------------------------- */

.statuses {width: 320px;}


/* 13 = MAGNET STYLES
---------------------------------------------------------- */

.magnet {
    height: 375px;
    margin: 0 5px 0 0;
    width: 188px;
}

.magnet.passenger-info {width: 189px;}

.magnet img {
    height: auto;
    width: 188px;
}

.magnet ul li a {
    background: url(../images/magnet-arrow.png) no-repeat 9px 16px;
    font-size: 12px;
    text-indent: 20px;
}

.magnet ul li a:hover {
    background: url(../images/magnet-arrow.png) no-repeat 9px -30px #3b3a3a;
}


/* 14 = SUBPAGE STYLES
---------------------------------------------------------- */

.content-bkgd {
    height: 540px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}

.content-wrapper .main-sub-heading {
    overflow: auto;
    padding: 32px 45px 0 0;
    text-align: right;
}

.content {background: url(../images/bkgd-sub-content.png) -50px top repeat-y;}

.main-content {
    float: left;
    padding: 30px;
    width: 505px;
}

.sub-magnet-wrapper .magnet {height: 129px;}


/* 15 = SUBPAGE SIDEBAR STYLES
---------------------------------------------------------- */

ul.sidebar {
    width: 200px;
}

ul.sidebar li a {
    padding: 5px 5px 5px 20px;
}

ul.sidebar li a:hover {
    background: #333;
    margin-left: 0;
}

ul.sidebar li a.active,
ul.sidebar li a.active:hover,
ul.sidebar li.current_page_item a,
ul.sidebar li.current_page_item a:hover  {
    background: #fff;
    color: #8c8c8c;
    margin-left: 0;
    padding: 5px 5px 5px 20px;
}

ul.sidebar li.current_page_item ul.children li a{
    background-color: #4f4f4f;
    color: #fff;
}

ul.sidebar ul {
    background-color: #4f4f4f;
    list-style: none;
    margin-left: 0;
}

ul.sidebar ul.children {display: none;}

ul.sidebar li.current_page_ancestor ul.children,
ul.sidebar li.current_page_item ul.children {display: block;}

ul.sidebar ul.children li a {padding-left: 30px;}

ul.sidebar ul.children li.current_page_item > a,
ul.sidebar ul.children li.current_page_item > a:hover {
    background: #fff;
}



/* 16 = FOOTER STYLES
---------------------------------------------------------- */

.footer .col-01,
.footer .col-02,
.footer .col-03,
.footer .col-04 {
    margin-right: 20px;
    width: 22%;
}

.footer .col-01 img {
    height: auto;
    width: 100%;
}
    
.footer .col-04 {margin-right: 0;}

.footer-bottom {
    padding: 20px 0;
    text-align: left;
}

.footer-bottom ul {
    margin: 0;
    width: auto;
}

.footer-bottom li {
    float: none;
    padding: 0;
}

.footer-bottom li:after {
    content: '';
    padding-left: 0;
}




.search-footer input {background: url(../images/icon-search.png) no-repeat 175px 9px #6e6e6e;}


/* END TABLET VIEW */
}



/*START MOBILE VIEW */

@media only screen and (max-width: 567px) {

/* 17 = HIDDEN ELEMENTS
---------------------------------------------------------- */

.main-header,
.birmingham-weather,
.next-arrival-departure-wrapper,
.shadow-rotator,
.alert .alert-notice,
.alert .alert-divider,
ul.breadcrumbs,
ul.sidebar {display: none;}

/* 18 = BASE STYLES
---------------------------------------------------------- */

h1,
.sub h1 {
    background: url(../images/bkgd-logo.png) 0 -140px no-repeat;
    font-size: 24px;
    height: 133px;
    left: 0;
    margin: 0;
    position: absolute;
    top: 0;
    width: 243px;
    z-index: 9;
}

h1 a,
.sub h1 a {
    display: block;
    height: 51px;
    margin: 10px 0 0 18px;
    overflow: hidden;
    width: 85px;
}

h1 a img,
.sub h1 a img {
    height: auto;
    width: 85px;
}


/* 19 = LAYOUT
---------------------------------------------------------- */

.global-width {width: 320px;}

.full-wrapper,
.full-wrapper-alert,
.full-wrapper-sub {
    min-height: 420px;
    min-width: 320px;
}

.alert-wrapper.active {
    height: auto;
    overflow: auto;
}

.content-wrapper {
    background: none;
    padding-top: 110px;
}

.swipe-btns {
    display: block;
}

.statuses td {
    padding-right: 6px;
    vertical-align: top;
}

/* 20 = HEADER/ALERT STYLES
---------------------------------------------------------- */

.alert-notice.active {
    background-color: #9a2929;
    border-top: 1px solid #7e181e;
    display: block;
    line-height: 20px;
    margin: 10px auto 0;
    padding: 10px 0 20px;
    text-indent: 0;
    width: 90%;
}

/* 21 = ROTATOR OVERLAY STYLES
---------------------------------------------------------- */

.rotator-overlay {
    background: none;
    bottom: 0px;
    min-height: 274px;
    top: 30%;
    width: 320px;
}

/* 22 = FLIGHT TRACKER STYLES
---------------------------------------------------------- */

.flight-tracker {
    float: none;
    margin: 0 auto 0;
    overflow: auto;
    padding-bottom: 1px;
    width: 300px;
}

.flight-tracker-views li.view-all {
	color: #fff;
	padding: 5px;
	}


.latest-tweets, .flight-tracker h5 {
	display:none;
	}

.flight-tracker-views	{
	margin-bottom: 20px;
	padding-left: 0;
	}

.flight-tracker-views li {
	display:block;
	float:none;
	}

.flight-tracker-views li a {
	border-bottom: 1px solid #d0d0d0;
	border-left: 0;
	border-right: 0;
	font-size:20px;
	padding: 30px;
}
.flight-tracker-views li:last-child a {
	border-right: 0;
	}


/* 23 = ARRIVAL/DEPARTURE STATUSES
---------------------------------------------------------- */

.statuses {width: 258px;}


/* 24 = MAGNET STYLES
---------------------------------------------------------- */

.magnet {
    float: none;
    height: 435px;
    margin: 0 auto 20px;
    overflow: auto;
    width: 251px;
}

.magnet.passenger-info {
    float: none;
    margin: 0 auto 20px;
}

.magnet ul li a {
    background: url(../images/magnet-arrow.png) no-repeat 9px 16px;
    font-size: 12px;
    text-indent: 20px;
}

.magnet ul li a:hover {background: url(../images/magnet-arrow.png) no-repeat 9px -30px #3b3a3a;}


/* 25 = SUBPAGE STYLES
---------------------------------------------------------- */

.content-bkgd {
    height: 540px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}

.content-wrapper .main-sub-heading {
    font-size: 30px;
    overflow: auto;
    padding: 12px 25px 20px 0;
    text-align: right;
}

.content {background: #fff;}

.main-content {
    float: none;
    padding: 20px;
    width: 260px;
}

.main-content .table td {
    padding: 5px 1px;
}

.main-content img {
	width: 100%;
	height: auto;
	margin: 5px 0;
}

.main-content iframe {
	width: 100%;
}

.responsive-table-wrap {
	display: block;
	overflow-x: scroll;
}

.responsive-table-wrap table {
	width: 100%;
	height: auto;
}

.sub-magnet-wrapper .magnet {height: 175px;}


/* 26 = SUBPAGE SIDEBAR STYLES
---------------------------------------------------------- */

ul.sidebar-push {
    background-color: #3b3a3a;
    border-top: 1px solid #333;
    display: none;
    float: none;
    line-height: 18px;
    list-style: none;
    padding: 0;
    width: 320px;
}

.section-mobile {
    background-color: #3b3a3a;
    color: #fff;
    display: block;
    font-size: 13px;
    padding: 10px 5px 10px 20px;
}

ul.sidebar-push li a {
    color: #fff;
    display: block;
    padding: 5px 5px 5px 20px;
}

ul.sidebar-push li a:hover {
    background: #333;
    margin-left: 0;
}

ul.sidebar-push li a.active,
ul.sidebar-push li a.active:hover,
ul.sidebar-push li.current_page_item a,
ul.sidebar-push li.current_page_item a:hover  {
    background: #fff;
    color: #8c8c8c;
    margin-left: 0;
    padding: 5px 5px 5px 20px;
}

ul.sidebar-push ul {
    background-color: #4f4f4f;
    list-style: none;
    margin-left: 10px;
    padding-left: 0;
}

ul.sidebar-push ul.children {
    display: block;
    margin-left: 0;
    padding-left: 10px;
}

ul.sidebar-push li.current_page_ancestor ul.children,
ul.sidebar-push li.current_page_item ul.children {display: block;}

ul.sidebar-push ul.children li.current_page_item > a,
ul.sidebar-push ul.children li.current_page_item > a:hover {
    background: #fff;
}

ul.sidebar-push li.current_page_ancestor ul.children li a,
ul.sidebar-push li.current_page_item ul.children li a {
    background-color: #4f4f4f;
    color: #fff;
    padding-left: 30px;
}

ul.sidebar-push li.current_page_ancestor ul.children li a:hover,
ul.sidebar-push li.current_page_item ul.children li a:hover {
    background-color: #333;
    color: #fff;
}

ul.sidebar-push li ul.children li.current_page_item a,
ul.sidebar-push li ul.children li.current_page_ancestor a {
    background-color: #fff;
    color: #8c8c8c;
}


.visit-link a span,
.retail-stores {display: none !important;}

.visit-link a:after {
    content: 'Visit Website';
}

/* 27 = FOOTER STYLES
---------------------------------------------------------- */

.footer .col-01,
.footer .col-02,
.footer .col-03,
.footer .col-04 {
    clear: both;
    float: none;
    margin: 0 auto 20px;
    overflow: auto;
    width: 300px;
}

.footer-bottom {
    margin: 0 auto 20px;
    padding: 20px 0;
    text-align: left;
    width: 300px;
}

.footer-bottom ul {
    margin: 0;
    width: auto;
}

.footer-bottom li {
    float: none;
    padding: 0;
}

.footer-bottom li:after {
    content: '';
    padding-left: 0;
}



.search-footer input {background: url(../images/icon-search.png) no-repeat 275px 9px #6e6e6e;}

/* END MOBILE VIEW */
}