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

/* ----------------------------------------------------------
    Birmingham City Council 
    Version 1.0

    TABLE OF CONTENTS

    01 - BASE STYLES
    02 - BACKGROUND & TEXT COLORS
    03 - BUTTONS
    04 - LAYOUT
    05 - HEADER STYLES
    06 - NAVIGATION STYLES
    07 - ROTATOR STYLES
    08 - SIDEBAR STYLES
    09 - FOOTER STYLES

    COLOR GUIDE (Main Site Colors and their Hex Codes)
    Main Blue: #0b6daf
	Dark Blue: #083e63
	Highlight Blue: #44afe1
	Highlight Orange: #eb8827
	Highlight Green: #72c422
    Text Gray: #777777
	Background Gray: #e9e9e9
	
	font-family: 'Roboto', sans-serif;
    font-family: 'Roboto Condensed', sans-serif;
    
	FONTS USED
    Main Copy:
    Main Headers:
    Secondary Headers:
    
---------------------------------------------------------- */
    

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

/* 01 = HIDDEN ELEMENTS
---------------------------------------------------------- */
	nav ul,
	ul.nav,
	.news-item p .learn-more,
	#content-sidebar ul.sub-nav,
	.search-wrapper,
	#event-calendar  {
	    display: none;
	}

.responsive-icons {
	padding-top: 0;
	padding-right:10px;
	float:right;
	width:75px;
	height:25px;
	}

/* 02 = BUTTONS & FORMS
---------------------------------------------------------- */

.gigantic{font-size: 24px;}

h1, .huge {
    font-size: 24px;
}

h2, .large {
    font-size: 20px;
}

h3, .big {
    font-size: 16px;
    margin: 0 0 20px;
}

h4, .normal {
    font-size: 15px;
}

h5, .small {
    font-size: 14px;
}

h6, .tiny {
    font-size: 14px;
    padding: 0 0 10px;
}



/* 03 = LAYOUT
---------------------------------------------------------- */

.global-width {
    margin: 0 auto;
    width: 600px;
}

#header {
	width:600px;
	height:auto;
	min-height:130px;
  padding-bottom: 22px;
	}
	
.search-wrapper	{
	width:600px;
	top:0;
	right:0;
	padding:4px 10px;
	background-color: #7D7E80;
}

.search-wrapper input[type="text"] {
	width: 590px;
}

#header h1 a {
  padding-bottom: 11px;
}

#header h2 {float:left;margin: 0; clear: left;}

#header h2 a {
	display:block;
	background: url('../images/logo-2018.png') no-repeat scroll top right;
  	width: 374px;
	height: 52px;
	text-indent: -9999px;

}

/* 04 = NAVIGATION & DROPDOWN STYLES
---------------------------------------------------------- */

#top-nav {
	right: 10px;
}

nav ul,
ul.nav,
.locations-wrapper ul {
	float:none;
    clear: both;
    font-family: 'Source Sans Pro', 'Arial', 'Helvetica', sans-serif;
    list-style: none;
    padding: 0;
	background-color: #7D7E80;
	margin: 0;

}

nav ul li,
ul.nav li {
    float: none;
    padding: 0;
}

nav ul li a,
ul.nav li a,
.locations-wrapper ul li a {
    border-bottom: 1px solid #A7A9AC;
    color: #fff;
    display: block;
    font-size: 13px;
    font-weight: bold;
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
}

nav ul li a.active,
ul.nav li a.active,
nav ul li.current_page_item a,
ul.nav li.current_page_item a,
nav ul li.current_page_ancestor a,
ul.nav li.current_page_ancestor a {
    background: none;
    background-color: #002E6D;
}

nav ul li a:hover,
ul.nav li a:hover {
    background-color: #002E6D;
}

.nav ul li:hover ul {left: -9999px;}

.nav-icon {
    background: url(../images/icons-responsive.png) top right no-repeat;
    cursor: pointer;
    display: block;
    height: 25px;
    line-height: 50px;
    width: 35px;
    float: right;
}

.search-icon {
    background: url(../images/icons-responsive.png) top left no-repeat;
    display: block;
    height: 25px;
    line-height: 50px;
    width: 35px;
    float: left;
}

.nh {min-height:1320px;}

#home-news, #home-media {
	display:block;
	margin: 20px 0 0 40px;
	height:auto;
	}

/* 07 = ROTATOR STYLES
---------------------------------------------------------- */

#billboard img {
	width:100%;
}

.slider5 {

	float: left;
	width: 100%;
	margin-top: -10px;
	z-index: 2;
}

.slide {
	float:left; 
	width: 180px;
	margin-right: 30px;
	}

.slide.img3 {margin-right: 0;}

.slider5 .slide:last-child {margin-right: 0;}

.img1 img {
	border-top: 10px solid #00AEEF;
	width: 180px !important;
	height: 132px !important;
}

.img2 img {
	border-top: 10px solid #A7A9AC;
	width: 180px !important;
	height: 132px !important;
}

.img3 img {
	border-top: 10px solid #002E6D;
	width: 180px !important;
	height: 132px !important;
}

.img4 img {
	border-top: 10px solid #00AEEF;
}

.img5 img {
	border-top: 10px solid #A7A9AC;
}

.img6 img {
	border-top: 10px solid #002E6D;
}


.rotator-wrap {
    display: block;
    height: 250px;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.rotator-wrap ul.rotator {margin: 0;}

.bx-wrapper {
width: 600px !important;
	max-width: 600px !important;
	}

.bx-wrapper img {
	height: 250px !important;
	}

    .bx-viewport {
        overflow: visible !important;
        -moz-box-shadow: 0 !important;
        -webkit-box-shadow: 0 !important;
        box-shadow: 0 !important;
        border: 0 !important;
        left: 0 !important;
        background: #fff !important;
    }

    .rotator-navigation {
        height: 56px;
        margin: -150px auto -20px auto;
        position: relative;
        width: 640px;
        right: 0;
    }

        .rotator-navigation .prev {
            background: url(../images/prev-arrow.png) no-repeat;
            border: 0;
            display: block;
            color: transparent;
            height: 56px;
            position: absolute;
            width: 18px;
        }

         .rotator-navigation .next {
            border: 0;
            background: url(../images/next-arrow.png) no-repeat;
            color: transparent;
            display: block;
            height: 56px;
            position: absolute;
            right: 0;
            width: 18px;
        }

.rotator-text {
    margin:-75px 0 0 425px;
    width: 415px;
    display: block;
    position: relative;
    color: #fff;
}

.r-text-content {
	margin-bottom: 10px;
}

.r-text-content h2 {
    font-size: 26px;
    text-transform: lowercase;
}

    .rtb-content {
        background: #b5b6b4;
        background: rgba(178,179,178,0.6);
        color: #fff;
        padding: 20px;
        width: 100%;
    }

    .rtb-content h2 {
        font-size: 26px;
        text-transform: lowercase;
    }

    .learn-more-btn {
		font-size: 14px;
        background: #b5b6b4;
        background: rgba(178,179,178,0.3);
        border: 1px solid #dedede;
        font-weight: bold;
        height: 15px;
        margin-top: 2px;
        height: 37px;
        text-align: center;
        width: 160px;
    }

    .learn-more-btn:hover {
        background: #a0a19f;
        background: rgba(178,179,178, 0.7);
    }


        .learn-more-btn a {
            color: #fff;
        }

    .learn-more-btn-link {
        display: block;
        height: 100%;
        line-height: 37px;
        width: 100%;
    }

/* 10 = SIDEBAR STYLES
---------------------------------------------------------- */

#content-sidebar {width:600px;}

#map-canvas {
	width: 580px !important;
	}

.map-legend {float:left;}

.section-icon {
    background: url(../images/icons-responsive-small.png) no-repeat 5px -31px;
    color: #fff;
    cursor: pointer;
    display: block;
    font-family: 'Source Sans Pro', 'Arial', 'Helvetica', sans-serif;
    font-size: 16px;
    font-weight: bold;
    height: 30px;
    line-height: 30px;
    padding: 5px 35px;
}

#content-sidebar ul.sub-nav {
	margin: 0;
	background-color: #A48A65;
	padding: 0;
	}

#content-sidebar ul.sub-nav li {
	font-size: 14px;
	font-family:'Roboto Condensed', sans-serif;
	list-style: none;
	padding: 0;
	margin: 0;
	}

#content-sidebar ul.sub-nav li a {
	color: #fff;
	display:block;
	padding: 10px;
	border-top: 1px solid #fff;
	text-transform: capitalize;
	font-weight: bold;
	}

#content-sidebar ul.sub-nav li:last-child ul li:last-child a {border-bottom: 1px solid #fff;}

#content-sidebar ul.sub-nav li a:hover, #content-sidebar ul.sub-nav li.current_page_item a {background-color: #7A684D;}

#content-sidebar ul.sub-nav ul {margin: 0;padding-left: 0;}

#content-sidebar ul.sub-nav ul li a,
#content-sidebar ul.sub-nav ul li a:last-child {
	border: none;
	padding: 5px 5px 5px 20px;
	text-transform: capitalize;
	font-weight: normal;
	}

#content-sidebar ul.sub-nav ul li a:hover {
	color: #7A684D;
	background-color: #A48A65;
	}

#content-sidebar ul.sub-nav ul li:last-child {
	margin-bottom: 15px;
}

.magnet {
	width: 600px;
	float:left;
	border-bottom: 1px solid #e5e5e5;
	margin-bottom: 20px;
	}

.magnet img {
	float: right;
	width: 50%;
	height: 50%;
	margin-left: 10px;
	}
	
.mag-3 {margin-right: 0;}

.magnet h3 {
	font-family:'Roboto Condensed', sans-serif;
	font-size: 24px;
	text-transform: uppercase;
}

/* 11 = SUBPAGE STYLES
---------------------------------------------------------- */

#content-wrapper.no-side #content, #content {
    width: 580px;
    margin: 0 auto;
    float: none;
}

.cw-center {
    width: 100%;
}

#content-wrapper h2 {margin-left:10px;}

.footer-magnet {width: 185px;}



#footer-copyright {
	min-height:180px;
	border: none;
	}

#footer-copyright .footer-left, 
#footer-copyright .footer-right,
#footer-copyright p.terms {float:none;}

iframe.google-map {
    border: 0;
    margin-left: 10px;
}


/*END TABLET VIEW */

} 



/*START MOBILE VIEW */

@media only screen and (min-width: 320px) and (max-width: 667px) {


/* 01 = HIDDEN ELEMENTS
---------------------------------------------------------- */
nav ul,
ul.nav,
.news-item p .learn-more,
#content-sidebar ul.sub-nav,
.search-wrapper,
#event-calendar,
#home-media a.more-link,
#home-news a.more-link  {
    display: none;
}

.responsive-icons {
	padding-top: 0;
	padding-right:0;
	float:right;
	width:40px;
	height:25px;
	margin-top: -65px;
	}


/* 01 = BASE STYLES
---------------------------------------------------------- */


.gigantic{font-size: 30px;}

h1, .huge {
    font-size: 24px;
}

h2, .large {
    font-size: 24px;
}

h3, .big {
    font-size: 18px;
    margin: 0 0 20px;
}

h4, .normal {
    font-size: 15px;
}

h5, .small {
    font-size: 14px;
}

h6, .tiny {
    font-size: 14px;
    padding: 0 0 10px;
}

p {
    font-size: 12px;
    line-height: 24px;
}

ul,
ol {
    font-size: 12px;
    padding-left: 15px;
}

table {
    font-size: 12px;
}


/* 03 = LAYOUT
---------------------------------------------------------- */

.global-width {
    margin: 0 auto;
    width: 320px;
}

#header {
	width:320px;
	height:auto;
	min-height:130px;
	padding-bottom: 11px;
	}
	
#header h1 a {	
	width: 280px;
	height: 75px;
	padding-bottom: 11px;
	}

#header h1 a img {
	width:220px;
	height:auto;
	padding-top: 10px;
}
	
.search-wrapper	{
	width:300px;
	top:0;
	right:0;
	padding:4px 0;
	background-color: #7D7E80;
}

.search-wrapper input[type="text"] {
	width: 285px;
}

#header h2 {float:left;margin: 0;}

#header h2 a {
	display:block;
	background: url('../images/logo-ph.png') no-repeat scroll top right;
	width: 260px;
	height: 36px;
	text-indent: -9999px;

}
/* 04 = NAVIGATION & DROPDOWN STYLES
---------------------------------------------------------- */

#top-nav {
	right: 10px;
}

nav ul,
ul.nav,
.locations-wrapper ul {
    float:none;
    clear: both;
    font-family: 'Source Sans Pro', 'Arial', 'Helvetica', sans-serif;
    list-style: none;
    padding: 0 0;
    background-color: #7D7E80;
    margin: 0;

}

nav ul li,
ul.nav li {
    float: none;
    padding: 0;
}

nav ul li a,
ul.nav li a,
.locations-wrapper ul li a {
    border-bottom: 1px solid #A7A9AC;
    color: #fff;
    display: block;
    font-size: 13px;
    font-weight: bold;
    height: 40px;
    line-height: 40px;

    padding: 0 10px;
}

nav ul li a.active,
ul.nav li a.active,
nav ul li.current_page_item a,
ul.nav li.current_page_item a,
nav ul li.current_page_ancestor a,
ul.nav li.current_page_ancestor a {
    background: none;
    background-color: #002E6D;
}

nav ul li a:hover,
ul.nav li a:hover {
    background-color: #002E6D;
}

.nav ul li:hover ul {left: -9999px;}

.nav-icon {
    background: url(../images/icons-responsive.png) top right no-repeat;
    cursor: pointer;
    display: block;
    height: 25px;
    line-height: 50px;
    width: 35px;
    float: right;
}

.search-icon {
    background: url(../images/icons-responsive.png) top left no-repeat;
    display: block;
    height: 25px;
    line-height: 50px;
    width: 35px;
    float: left;
  position: absolute;
  top: 61px;
  right: -10px;
}

.nh {min-height:1860px;}

#home-news, #home-media {
	display:block;
	margin: 20px 0 0 0;
	height:auto;
	width: 320px;
	}

#home-media .tease, #home-news .tease {
	width: 310px;
	padding: 10px 5px;
	}

	#home-media .media-post,
	#home-media .media-post.odd,
	#home-news .news-post,
	#home-news .news-post.odd {float:none; width: 320px; margin: 10px auto 10px auto;}

	#home-media .media-post.featured,
	#home-news .news-post.featured {
		width: 320px;
	}

	#home-media .media-post.featured img, 
	#home-news .news-post.featured img,
	#home-media .media-post img, 
	#home-news .news-post img {
		width: 320px !important;
		height: auto !important;
	}
	
#top-nav li.holder {display:none;}
	
/* 07 = ROTATOR STYLES
---------------------------------------------------------- */

#billboard img {
	width:100%;
}

.slider5 {

	float: left;
	width: 100%;
	margin-top: 0;
	z-index: 2;
}

.slide {
	float:left; 
	width: 180px;
	margin-right: 30px;
	}

.slide.img3 {margin-right: 0;}

.slider5 .slide:last-child {margin-right: 0;}

.img1 img {
	border-top: 10px solid #00AEEF;
	width: 320px !important;
	height: 235px !important;
}

.img2 img {
	border-top: 10px solid #A7A9AC;
	width: 320px !important;
	height: 235px !important;
}

.img3 img {
	border-top: 10px solid #002E6D;
	width: 320px !important;
	height: 235px !important;
}

.img4 img {
	border-top: 10px solid #00AEEF;
}

.img5 img {
	border-top: 10px solid #A7A9AC;
}

.img6 img {
	border-top: 10px solid #002E6D;
}


.rotator-wrap {
    display: block;
    height: 133px;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.rotator-wrap ul.rotator {margin: 0;}

.bx-wrapper {
width: 320px !important;
	max-width: 320px !important;
	}

.bx-wrapper img {
	height: 133px !important;
	}

    .bx-viewport {
        overflow: visible !important;
        -moz-box-shadow: 0 !important;
        -webkit-box-shadow: 0 !important;
        box-shadow: 0 !important;
        border: 0 !important;
        left: 0 !important;
        background: #fff !important;
    }

    .rotator-navigation {
        height: 56px;
        margin: -85px auto -20px auto;
        position: relative;
        width: 370px;
        right: 0;
    }

        .rotator-navigation .prev {
            background: url(../images/prev-arrow.png) no-repeat;
            border: 0;
            display: block;
            color: transparent;
            height: 56px;
            position: absolute;
            width: 18px;
        }

         .rotator-navigation .next {
            border: 0;
            background: url(../images/next-arrow.png) no-repeat;
            color: transparent;
            display: block;
            height: 56px;
            position: absolute;
            right: 0;
            width: 18px;
        }

.rotator-text {
    margin:-75px 0 0 425px;
    width: 415px;
    display: block;
    position: relative;
    color: #fff;
}

.r-text-content {
	margin-bottom: 10px;
}

.r-text-content h2 {
    font-size: 26px;
    text-transform: lowercase;
}

    .rtb-content {
        background: #b5b6b4;
        background: rgba(178,179,178,0.6);
        color: #fff;
        padding: 20px;
        width: 100%;
    }

    .rtb-content h2 {
        font-size: 26px;
        text-transform: lowercase;
    }

    .learn-more-btn {
		font-size: 14px;
        background: #b5b6b4;
        background: rgba(178,179,178,0.3);
        border: 1px solid #dedede;
        font-weight: bold;
        height: 15px;
        margin-top: 2px;
        height: 37px;
        text-align: center;
        width: 160px;
    }

    .learn-more-btn:hover {
        background: #a0a19f;
        background: rgba(178,179,178, 0.7);
    }


        .learn-more-btn a {
            color: #fff;
        }

    .learn-more-btn-link {
        display: block;
        height: 100%;
        line-height: 37px;
        width: 100%;
    }


/* 10 = SIDEBAR STYLES
---------------------------------------------------------- */

#content-sidebar {width:320px;}

#map-canvas {
	width: 300px !important;
	}

.map-legend {float:left;}

.map-search input[type="text"] {
	width: 200px;
	}

ul.map-legend li {
	padding: 5px 10px;
}
.section-icon {
    background: url(../images/icons-responsive-small.png) no-repeat 5px -31px;
    color: #fff;
    cursor: pointer;
    display: block;
    font-family: 'Source Sans Pro', 'Arial', 'Helvetica', sans-serif;
    font-size: 16px;
    font-weight: bold;
    height: 30px;
    line-height: 30px;
    padding: 5px 35px;
}


#content-sidebar ul.sub-nav {
	margin: 0;
	background-color: #A48A65;
	padding: 0;
	}

#content-sidebar ul.sub-nav li {
	font-size: 14px;
	font-family:'Roboto Condensed', sans-serif;
	list-style: none;
	padding: 0;
	margin: 0;
	}

#content-sidebar ul.sub-nav li a {
	color: #fff;
	display:block;
	padding: 10px;
	border-top: 1px solid #fff;
	text-transform: capitalize;
	font-weight: bold;
	}

#content-sidebar ul.sub-nav li:last-child ul li:last-child a {border-bottom: 1px solid #fff;}

#content-sidebar ul.sub-nav li a:hover, #content-sidebar ul.sub-nav li.current_page_item a {background-color: #7A684D;}

#content-sidebar ul.sub-nav ul {margin: 0;padding-left: 0;}

#content-sidebar ul.sub-nav ul li a,
#content-sidebar ul.sub-nav ul li a:last-child {
	border: none;
	padding: 5px 5px 5px 20px;
	text-transform: capitalize;
	font-weight: normal;
	}

#content-sidebar ul.sub-nav ul li a:hover {
	color: #7A684D;
	background-color: #A48A65;
	}

#content-sidebar ul.sub-nav ul li:last-child {
	margin-bottom: 15px;
}

#content #blog-sidebar {
	float: none;
	width: 300px;
	padding-left: 0;
	
}

#content #posts-wrapper {
	margin-right: 0;
	border-right: 0;
	padding-right: 10px;
	}

.magnet {
	border-bottom: 1px solid #e5e5e5;
	margin-bottom: 20px;
	}


/* 11 = SUBPAGE STYLES
---------------------------------------------------------- */

.wpfilebase-file-default .icon img {display:none!important;}
.wpfilebase-file-default .filetitle {height: auto !important;}
.wpfilebase-file-default {width: 280px !important;}

#content-wrapper.no-side #content, #content {
    width: 300px;
	margin: 0 auto;
    float: none;
}

.cw-center {
    width: 100%;
}

#content img.aligncenter,
#content img.alignleft,
#content img.alignright {
	width: 75% !important;
	height: 75% !important;
}

#content-wrapper h2 {margin-left:10px;}

#footer {padding-top: 20px;min-height: 750px;}
.footer-magnet {float:none;width: 320px;}

#footer ul {float: none;}

#footer-copyright {
	min-height:200px;
	border: none;
	}

#footer-copyright .footer-left, 
#footer-copyright .footer-right,
#footer-copyright p.terms {float:none;}

iframe.google-map {
    border: 0;
    position: relative;
    left: 0;
    height: 300px;
    width: 300px;
    margin-bottom: 10px;
}

/* END MOBILE VIEW */

}