/*
	Author: Jonathan Lum
	Date Modified: 8/28/2017
	File Name: header.css
	
	Brief Description: This is the stylesheet for the header for the JonEl Media site.
*/

    header.container-fluid {
        padding-right: 0;
        padding-left: 0;
    }

/* CSS for Desktop 768px and > width */
@media all and (min-width: 768px) {

	header.main-header  {
		margin: 0 0 1% 0;
//border: 1px solid blue;
        border-bottom: 1px solid orange;
		padding: 0;
	}
	header #banner {
		margin: 0;
//border: 1px solid red;
		border-bottom: 1px solid orange;
		padding: 0;
		background-image: url( "../images/JonEl_Media_Banner_new.jpg" );
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
        height: 150px;
	}
    nav.navbar {
		margin: 0;
		border: none;
//border: 1px solid orange;
		padding: 0;
		color: #FFFFFF;
	}
    button.navbar-toggle {
        border: 1px solid #FFF;
    }
	#banner #youtube-button {
		margin: 10px 15px 0 0;
		border: none;
//border: 1px solid green;
		padding: 0;
		background-image: url('../site-icons/youtube_black.png');
		background-size: 100%;
		background-repeat: no-repeat;
		height: 36px;
		width: 51px;
		float: right;
	}
	#banner #youtube-button:hover {
		background-image: url('../site-icons/youtube.png');
	}
	#banner #twitter-button {
		margin: 10px 15px 0 0;
		border: none;
//border: 1px solid green;
		padding: 0;
		background-image: url('../site-icons/twitter_black.png');
		background-size: 100%;
		background-repeat: no-repeat;
		height: 36px;
		width: 36px;
		float: right;
	}
	#banner #twitter-button:hover {
		background-image: url('../site-icons/twitter.png');
	}
	#banner #facebook-button {
		margin: 10px 15px 0 0;
		border: none;
//border: 1px solid green;
		padding: 0;
		background-image: url('../site-icons/facebook_black.png');
		background-size: 100%;
		background-repeat: no-repeat;
		height: 36px;
		width: 36px;
		float: right;
	}
	#banner #facebook-button:hover {
		background-image: url('../site-icons/facebook.png');
	}
    .navbar-right {
        display: none;
    }
	#main-nav-list {
		margin: 0;
//border: 1px solid red;
        border: none;
		padding: 0;
		overflow: hidden;
	}
	#main-nav-list li {
		margin: 0;
//border: 1px solid blue;
		border: none;
		padding: 0;
		font-size: 1.1em;
	}
	#main-nav-list a {
		color: #00ceff;
		text-decoration: none;
	}
    #main-nav-list a:hover {
        color: orange;
        background-color: #1d1e20;
    }
}
/* End CSS for Desktop */

/* CSS for Mobile 767px and < width */
@media all and (max-width: 767px ) {
    
	header {
		margin: 0 0 1% 0;
//border: 1px solid blue;
        border-bottom: 1px solid orange;
		padding: 0;
	}
	header #banner {
		margin: 0;
//border: 1px solid red;
		border-bottom: 1px solid orange;
		padding: 0;
		background-image: url( "../images/JonEl_Media_Banner_new.jpg" );
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
        height: 60px;
	}	
    nav.navbar {
		margin: 0;
		border: none;
//border: 1px solid orange;
		padding: 0;
		color: #FFF;
	}
    button.navbar-toggle {
        border: 1px solid #FFF;
        color: #FFF;
    }
	.navbar-right #youtube-button {
		margin: 0 10px 0 32px;
		border: none;
//border: 1px solid green;
		padding: 0;
		background-image: url('../site-icons/youtube.png');
		background-size: 100%;
		background-repeat: no-repeat;
		height: 25px;
		width: 34px;
        float: left;
        vertical-align: middle;
	}    
	.navbar-right #twitter-button {
		margin: 0 10px 0 40px;
		border: none;
//border: 1px solid green;
		padding: 0;
		background-image: url('../site-icons/twitter.png');
		background-size: 100%;
		background-repeat: no-repeat;
		height: 25px;
		width: 25px;
        float: left;
        vertical-align: middle;
	}
	.navbar-right #facebook-button {
		margin: 0 10px 0 40px;
		border: none;
//border: 1px solid green;
		padding: 0;
		background-image: url('../site-icons/facebook.png');
		background-size: 100%;
		background-repeat: no-repeat;
		height: 25px;
		width: 25px;
        float: left;
        vertical-align: middle;
        display: block;
	}
	#main-nav-list {
		margin: 0;
//border: 1px solid red;
        border: none;
		padding: 0;
		overflow: hidden;
	}
	#main-nav-list li {
		margin: 0;
//border: 1px solid blue;
		border: none;
		padding: 0;
		font-size: 1.1em;
	}
	#main-nav-list a {
		color: #00ceff;
		text-decoration: none;
	}

}
/* End CSS for Mobile */