/*
	Author: Jonathan Lum
	Date Modified: 6/3/2017
	File Name: footer.css
	
	Brief Description: This is the stylesheet for the footer for the JonEl Media site.
*/

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

	footer {
		clear:both;
		margin: 1% 0 0 0;
		border: none;
//border: 1px solid purple;
		border-top: 1px solid orange;
		padding: 0 0 5% 0;
        background-color: #1d1e20;
		color: #FFF;
	}
	footer #content-links {
		margin: 20px 0 20px 0;
//border: 1px solid red;
		border-right: 2px solid #FFFFFF;
		padding: 10px 40px 20px 0;
		font-size: 1.1em;
		text-align: right;
	}
	footer #content-links a {
		margin: 0;
		border: none;
//border: 1px solid red;
		padding: 0;
		text-decoration: none;
		color: orange;
		display: inline-block;
	}
	footer #youtube-subscribe {
		margin: 10px 0 0 0;
		border: none;
//border: 1px solid red;
		padding: 0 0 5px 0;
		display: inline-block;
		overflow: hidden;
		vertical-align: middle;
	}
	footer #youtube-button {
		margin: 0 0 5px 0;
		border: none;
		padding: 0;
		height: 36px;
		vertical-align: middle;
	}
	footer #twitter-button {
		margin: 0 0 5px 0;
		border: none;
		padding: 0;
		height: 36px;
		vertical-align: middle;
	}
	footer #facebook-button {
		margin: 0 0 5px 0;
		border: none;
		padding: 0;
		height: 36px;
		vertical-align: middle;
	}

	footer #contact-links {
		margin: 20px 0 20px 0;
		border: none;
//border: 1px solid orange;
		padding: 20px 0 20px 40px;
		font-size: 1.1em;
        line-height: 34px;
	}
	footer #contact-links a {
		margin: 0;
		border: none;
//border: 1px solid red;
		padding: 0;
		text-decoration: none;
		color: orange;
		display: inline-block;
	}
	footer #contact-links a:hover {
		color: #00ceff;
	}
	footer #copyright {
		margin: 0;
		border: none;
//border: 1px solid green;
		padding: 20px 0 0 0;
		text-align: center;
		clear: both;
	}
	
}
/* End CSS for Desktop */

/* CSS for Mobile 767px and < width */
@media all and (max-width: 767px ) {
    
	footer {
		clear:both;
		margin: 1% 0 0 0;
		border: none;
//border: 1px solid purple;
		border-top: 1px solid orange;
		padding: 0 0 5% 0;
        background-color: #1d1e20;
		color: #FFF;
	}

	footer #content-links {
		margin: 0;
border: 1px solid red;
        border: none;
		padding: 0 0 0 4%;
		font-size: .9em;
	}
	footer #content-links a {
		margin: 0;
		border: none;
//border: 1px solid red;
		padding: 0;
		text-decoration: none;
		display: inline-block;
	}
	footer #youtube-subscribe {
		margin: 10px 0 0 0;
		border: none;
//border: 1px solid red;
		padding: 0 0 5px 0;
		display: inline-block;
		overflow: hidden;
		vertical-align: middle;
	}
	footer #youtube-button {
		margin: 0 0 5px 70px;
		border: none;
		padding: 0;
		height: 25px;
		vertical-align: middle;
	}
	footer #twitter-button {
		margin: 0 0 5px 80px;
		border: none;
		padding: 0;
		height: 25px;
		vertical-align: middle;
	}
	footer #facebook-button {
		margin: 0 0 5px 80px;
		border: none;
		padding: 0;
		height: 25px;
		vertical-align: middle;
	}	



	footer #contact-links {
		margin: 0 0 0 4%;
		border: none;
//border: 1px solid orange;
		padding: 0;
		font-size: .9em;
        line-height: 25px;
	}
	footer #contact-links a {
		margin: 0 0 0 75px;
		border: none;
//border: 1px solid red;
		padding: 0;
		text-decoration: none;
		color: orange;
		display: inline-block;
	}
	footer #copyright {
		margin: 0;
		border: none;
//border: 1px solid green;
		padding: 20px 0 0 0;
		text-align: center;
		clear: both;
	}
	
}
/* End CSS for Mobile */