/* Custom CSS */

body { padding-top: 70px; }/* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: bold; }

/*==================== Header ====================*/

.header { top: 0; z-index: 9999; }
img#header-logo { height: 50px; float: left; }
.navbar-brand { padding: 0px; }
.home-button { font-size: 25px; padding: 12px; }

/* Header Search Bar */
.searchbar { margin-top: 5px; }
li.header-search { float: right; padding-left: 15px; }
li.header-search input[type="button"], li.header-search input[type="reset"], li.header-search input[type="submit"] { background: #fff; color: #222; border: 1px solid #fff; }
li.header-search input { padding: 1px 5px; }


/*==================== Home Page ====================*/

.home-logo { float: none; display: block; margin: 0 auto; }
.home-category { margin-bottom: 30px; }
.text-center h3 { margin-bottom: 0px; }
.img-center { margin: 0 auto; }
img.img-center:hover { opacity: 0.5; }

.col-lg-12.main-menu { margin-top: 40px; }


/*==================== Forms/Live Search/Other Input ====================*/

.accountForm { max-width: 500px; clear: both; }
.accountForm input, .accountForm textarea, .accountForm input[type="text"], .accountForm input[type="password"] { width: 200px; max-width: 100%; clear: both; float: right; padding: 5px; }
.g-recaptcha { margin: 20px 0px; }

.recipeForm { max-width: 500px; clear: both; }
.recipeForm input { max-width: 100%; clear: both; }

.ingredientForm { max-width: 200px; clear: both; }

.categoryDropdown { margin-bottom: 20px; }

textarea, input[type="text"], input[type="password"] { background: #fff; border: 1px solid #000; padding: 1px 5px; }
select { background: #fff; border: 1px solid #000; padding: 2px 5px; }
input[type="button"], input[type="reset"], input[type="submit"] { background: #222; color: #fff; border: 1px solid #222; }
input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover { opacity: 0.7; }
input[type="submit"] { margin-top: 10px; }
input.livesearch { width: 100%; float: left; padding: 5px; margin-bottom: 10px; }
label { margin-right: 5px; }
p.search-results { width: 100%; float: left; margin-bottom: 20px; }


/*==================== Sidebar ====================*/
.blog-sidebar .default-button { margin-bottom: 10px; }
hr#qr-code { margin-top: 10px; }

/*==================== Buttons ====================*/

.black-button { background: #222; color: #fff; text-align: center; padding: 5px; border: 1px solid #222; }
a.black-button:hover { color: #fff; text-decoration: none; opacity: 0.7; }
.default-button a, a.default-button { color: #000; text-align: center; }
.default-button a:hover, a.default-button:hover { color: #000; text-decoration: none; opacity: 0.7; }

/*Buttons*/
a.button { background-color: #1DB954; color: #fff; font-size: 20px; font-weight: 400; text-align: center; text-decoration: none; display: inline-block; min-width: 150px; padding: 15px; border-radius: 10px; margin-right: 20px; margin-bottom: 20px; }
a.button.full { width: 100%; margin-bottom: 10px; margin-right: 0; }
a.button.black { background-color: #222222; }
a.button:hover { opacity: 0.7; }

/*Listen on Spotify Button*/
a.listen-spotify { width: 150px; float: left; margin-bottom: 30px; margin-right: 20px; }
a.listen-spotify:hover { opacity: 0.7; }

/*Download Button */
a.download { width: 150px; float: left; margin-bottom: 20px; margin-right: 20px; }
a.download:hover { opacity: 0.7; }

/*Sort Order Menu*/
.sorting { width: 100%; float: left; margin-bottom: 30px; }
.sorting a.button { margin-right: 10px; margin-bottom: 10px; }
.sorting a.button.black:hover { opacity: 1; }
.glyphicon.show { display: inline-block !important; }


/*==================== Tables ====================*/

td.center, th.center { text-align: center; }
.table-image img { width: 100px; height: 56px; object-fit: cover; }
span.recServing { display: none; }
td.ingImage { width: 116px; }
td.ingName { width: 134px; }
td.ingDescription { width: 890px; }


td.userName { text-transform: capitalize; }

td.artist img { width: 100px; height: 100px; object-fit: cover; border-radius: 50%; }
td.album img { width: 100px; height: 100px; object-fit: cover; }

th, td { text-align: center; min-width: 85px; }
th.songCount { min-width: 120px; }
td.ranking, td.sortID { font-size: 2em; font-weight: bold; }
td.songCount { font-weight: bold; }


/*==================== Footer ====================*/
.container { margin-bottom: 70px; }
#header-container, #buttons-container { margin-bottom: 0px; }
.footer { background: #fff; position: fixed; bottom: 0; width: 100%; height: 50px; padding: 5px; webkit-box-shadow: 1px 1px 10px 1px #858585; box-shadow: 1px 1px 10px 1px #858585; }



/*==================== Media Queries ====================*/

	@media(max-width: 1030px)
	{
		/*Navigation Fixes*/
		body { padding-top: 120px; }
		li.header-search { padding-bottom: 15px; }
	}
	@media (max-width: 1029px)
	{
		/*Tablet*/
		img#header-logo:hover { opacity: 0.8; }
		.container { width: 100%; }
	}
	@media (max-width: 1024px)
	{
		/*iPad - Landscape*/

	}
	@media (max-width: 768px)
	{
		/*iPad - Portrait*/
		/*.navbar-brand { padding: 0px 5px 0px 10px; }*/
	}
	@media (max-width: 767px)
	{
		/*Mobile*/
		body { padding-top: 70px; }
		li.header-search { float: left; width: 100%; }
		.blog-post img { width: 100%; height: auto; }
		.blog-sidebar .default-button { float: left; margin-right: 10px; }
		.qr-code { clear: both; }
	}
	@media (max-width: 540px)
	{
		/*Button Fixes*/
		.blog-sidebar .default-button { float: none; }
	}
	@media (max-width: 480px)
	{
		/*Small Mobile*/
		h1.page-header { font-size: 26px; }
		li.header-search { padding-right: 15px; }
		.black-button { display: block; float: none; width: 70%; margin: 0 auto; margin-bottom: 30px; }
		.accountForm input, .accountForm textarea, .accountForm input[type="text"], .accountForm input[type="password"] { width: 100%; margin-bottom: 15px; }
		input[type="button"], input[type="reset"], input[type="submit"] { margin: 10px 0px 30px 0px; }

		table.songs td { display: block; }
		table.songs thead { display: none; }
		table.songs tr { width: 100%; float: left; border-bottom: 40px solid #fff; }
		table.songs .table-image img { width: 100%; height: 135px; object-fit: cover; }
		table.songs td.table-image { width: 50%; height: 100%; float: left; }
		table.songs td.center { width: 50%; float: right; }
		table.songs td.td-left { float: left; }
		table.songs td.td-right { float: right; }

		td.recName { text-align: center; width: 50%; float: right; }
		td.ingImage { width: 50%; float: left; }
		td.ingName { width: 50%; float: right; }
		span.recServing { display: initial; }

		table.songs tr { display: flex; flex-wrap: wrap; justify-content: center; border: 2px solid #181818; border-radius: 15px; margin-bottom: 40px; }
		table.songs td { width: 100%; }
		table.songs td.sortID { border-top: 0px !important; }
		table.songs td.artist, table.songs td.album { width: 50%; float: left; }
		table.songs td.artistName, table.songs td.albumTitle { width: 50%; float: right; display: flex; justify-content: center; align-items: center; }

		table.songs tr { background-color: #181818; }
		table.songs tr td, table.songs tr td a  { color: #fff; border-color: #333; }
		table.songs > tbody > tr:nth-of-type(odd) { background-color: #1DB954; border: 2px solid #1DB954; }
		table.songs > tbody > tr:nth-of-type(odd) td, table.songs > tbody > tr:nth-of-type(odd) td a { color: #fff; border-color: #0E6B0E; }
		table.songs td.songTitle { font-weight: bold; }

		a.button { width: 100%; margin-bottom: 20px; }
		a.button.small { width: unset; }
	}
	@media (max-width: 320px)
	{
		/*iPhone 4/5*/
		h1.page-header { font-size: 20px; }
		select { width: 75%; }
	}
	@media print
	{
		body { padding-top: 0px; }
		.header, .footer { display: none; }
		.col-lg-12 p { margin-bottom: 20px; }
		.col-sm-8 { width: 60%; float: left; }
		.col-sm-3 { width: 35%; float: right; }
		hr#sidebar, hr#button { display: none; }
		.default-button { display: none; }
		a[href]:after { content: none !important; }
		h1.page-header, h1 { font-size: 22px; font-weight: bold; }
		h2 { font-size: 20px; font-weight: bold; }
		h4 { font-size: 14px; font-weight: bold; }
		h1.page-header { margin-top: 0px; }
		.container { margin-bottom: 0px; }
		.qr-code img { width: 100px; height: auto; }
	}