/* 
Keep changes to original stylesheet to the minimum, 
only change width values from px to % and pump up
the font-sizes to maintain readibility
*/

/* Font-sizes and such for extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {

	#header, #container-decorative, #footer {min-width:300px;width:100%;margin:0;}
	#container #content, #container #sidebar {width:100%;clear:both;}
	.latest-release p img {height:100%;width:100%;}
	#highlights-inside h4, #highlights-inside p {width:100%;}
}
/* change width values from px to % for slightly smaller resolutions */

@media only screen and (max-width: 735px) {
	#searchform {position:absolute;right:0;top:0;width:300px;height:60px;background:rgba(0,0,0,0.5);}
	#searchform input#s {margin-top:20px;width:160px;max-width:200px;font-size:1.1em;}
	#searchform .searchbutton {margin:20px 20px 0 0;font-size:1.1em;width:50px;}
	#content div.post h3 {font-size:2.5em;}
}

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

body {background:#000;margin:0;padding:0;}
/* HEADER */
#header, #container-decorative, #footer {width:100%;min-width:600px;margin:0;}
#header {background:url(./img/site-header-2025-1.jpg) center -120px no-repeat;border-top:10px solid #5f0105;}
#header-inside {width:100%;}
#masthead {width:100%;height:638px;}
#masthead h1 {width:98%;margin:0 0 0 1%;height:590px;}
#masthead h1 span, #masthead h1 a {width:80%;height:180px;margin:30px 0 0 10%;}
#navbar {padding:0 6% 0 6%;min-height:50px;width:88%;}
#navbar ul {margin:10px 0 0 0;min-height:30px;width:100%;padding:0;list-style:none;}
#navbar li#search-tab {max-width:50%;min-width:180px}
#searchform {margin: 0;padding:0 0 0 5px;text-align: left;}
#s {height:20px;width:120px;}
.searchbutton {height:30px;}

#container {background:url(./img/main-content-bg-2025-2.jpg) center top no-repeat;border-top:2px solid #5f0105;}
#container-wrapper {width:99%;margin:0 0 0 0;padding:0 0 0 0;background:transparent;}
#container-lines {width:100%;background:transparent;}

/* content and sidebar to 100% width instead of left aligned columns */
#content {width:65%;font-size:140%;}
#content-inside {margin:3em 0 0 0;padding:0 5% 35px 5%;width:90%;}

div.post{padding: 0 0 0 2%;width:98%;}
div.post h3 {font-size:2.75em;}
a.h3:link, a.h3:visited, a.h3:active{font-size:1em;}
/* POST META */
div.meta {width:100%;}
.meta-search-results {width:100%;}
#content div.meta p {font-size: 0.9em;line-height: 1.3em;width:100%;margin-bottom:0.25em;}
/* SIDEBAR */
#sidebar {background:#5F0105;background: linear-gradient(180deg,rgba(95, 1, 5, 1) 0%, rgba(95, 1, 5, 1) 50%, rgba(0, 0, 0, 1) 100%);padding:0;width:35%;font-size:1.4em;border:0 none;}
#sidebar-inside  {width:100%;margin:0 0 0 0;}
#sidebar h3 {font-size:2em;}
h3#in-stores-now {text-indent:0;display:block;float:none;margin:auto;padding:0;width:100%;height:auto;background:transparent;}
h3#ordering-information {text-indent:0;display:block;float:none;margin:auto;padding:0;width:100%;height:auto;background:transparent;}
#highlights {margin:0 0 0 0;	padding:0 0 2.5em 0;width:100%;background:transparent;border: 0 none;border-bottom:0 none;border-bottom-left-radius: 0;  border-bottom-right-radius: 0;}
#highlights-inside {margin:0;padding:3em 5% 0 5%;width:90%;background:transparent;}

/* album covers on the sidebar */
#highlights-inside h4 {width:100%;}
#highlights-inside p {width:100%;}
.latest-release {width:100%;text-align:center;margin-bottom:0.5em;clear:both;border-top: 1px solid rgba(210,184,135,0.2);}
.latest-release:nth-child(odd){margin-right:0;margin-bottom:0.5em;clear:both;}
#sidebar h4 {font-size:1.6em;}
.latest-release h4 {text-align:center;}
#highlights .latest-release p {text-align:center;margin:0 0 1em 0;}
.latest-release p img {min-width:180px;min-height:180px;max-width:300px;max-height:300px;height:100%;width:100%;margin-bottom:0.5em;}
#alt-highglights {width:100%;}
.cols {width:100%;margin:0 0 1em 0;padding:0;float:left;}
.col1 {margin:0;padding:0 3% 0 3%;width:94%;}
.col2 {margin:0;padding:0 3% 0 3%;width:94%;}
#sidebar .col1 ul li, #sidebar .col2 ul li, #sidebar .col2 ul li li {width:100%;}
#sidebar .col1 ul li:first-child {border-top: 1px solid #716543;padding-top:2.5em;}
#sidebar .cols ul li:last-child {border-bottom: 1px solid #716543;}
#sidebar .col2 ul li:last-child {border-bottom: 0 none;}
#sidebar #oi p {width:90%;padding-top:1em;margin-bottom:2.5em;}
#sidebar #lr p {width:100%;padding-top:1em;margin-bottom:0.5em;}

/* FOOTER */
#footer-inside-decorative {background:#000 url(./img/footer-bg-2025-2.jpg) top center no-repeat;}
#footer-inside {width:100%;font-size:120%;}
#footer .col-clear {width:100%;}
#footer #site-end-footer {width:90%;margin:0;padding:15px 5% 0 5%;}
#footer #site-end-footer #footernavi {width:100%;margin:0 0 0 0;padding:0 0 0 0;}
#footer #site-end-footer #footernavi ul {width:100%;float:none;margin:0 auto;text-align:center;}
#footer #site-end-footer #footernavi ul li {float:none;display:inline;}
#site-end-footer #legal {width:100%;margin:0;padding:1em 0;float:left;}
#legal p {text-align:center;}
#site-end-footer #disclaimer{width:100%;height:100px;margin:2em 0 0 0;padding:2em 0 0 0;border-top:1px solid #5f0105;text-align:center;}
#disclaimer p {font-size:85%;text-align:center;}
#seal {width:250px;height:250px;margin:0 auto 3.5em auto;clear:both;}
#seal a {display:block;width:100%;height:100%;text-indent:-9999px;background:url(./img/extras/TPH_25-years-of-Blasphemy.png) no-repeat;background-size: cover;opacity:0.35;}
#seal a:hover {opacity:0.4;}
}