@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
*{ margin:0 }

.container-4{
  overflow: hidden;
  width: 300px;
  vertical-align: middle;
  white-space: nowrap;
}

.container-4 input#search{
  width: 300px;
  height: 50px;
  background: #2b303b;
  border: none;
  font-size: 10pt;
  float: left;
  color: #fff;
  padding-left: 15px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.container-4 input#search::-webkit-input-placeholder {
   color: #65737e;
}
 
.container-4 input#search:-moz-placeholder { /* Firefox 18- */
   color: #65737e;  
}
 
.container-4 input#search::-moz-placeholder {  /* Firefox 19+ */
   color: #65737e;  
}
 
.container-4 input#search:-ms-input-placeholder {  
   color: #65737e;  
}

.container-4 button.icon{
  -webkit-border-top-right-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  -moz-border-radius-topright: 5px;
  -moz-border-radius-bottomright: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
 
  border: none;
  background: #232833;
  height: 50px;
  width: 50px;
  color: #4f5b66;
  opacity: 0;
  font-size: 10pt;
 
  -webkit-transition: all .55s ease;
  -moz-transition: all .55s ease;
  -ms-transition: all .55s ease;
  -o-transition: all .55s ease;
  transition: all .55s ease;
}

.container-4:hover button.icon, .container-4:active button.icon, .container-4:focus button.icon{
  outline: none;
  opacity: 1;
  margin-left: -50px;
}
 
.container-4:hover button.icon:hover{
  background: white;
}
/* ----move these for large devices otherwise be 100% w/h-------- */
@media all and (orientation: portrait) {
  img.ri { max-width: 50%; }
}
@media all and (orientation: landscape) {
  img.ri { max-height: 50%; }
}
/* ----tiny and medium sized devices---------- */
@media all and (min-width: 15em) {
img.ri:empty {
	top: 50%; left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
img { border-style: none; max-width:100%; height:auto;} 
img.bg {
	/* background */ 
	max-height: 100%; max-width: 100%;
	/* proportionate scaling */
	width: 100%; height: 100%;
	/* positioning */
	/* position: absolute;
	left:20px; top:2px; */
	background-size: contain;
	}

a { outline: none;}
a:link {text-decoration: none; color:#D68B2E; font-style: bold;}
a:visited {text-decoration: none; color:#D68B2E;}
a:active {text-decoration: underline; color:#D68B2E;} 
a:hover {color: #D68B2E; text-decoration: none;}

.hHome {height:100%; position:relative; left:1%; top:5%;}
/*======Home==========*/
#ginger2 {position: absolute; top:8%; left:-3%; z-index:3000;}
#baker { position:absolute; left:21%; top:48%; font-size: 10vw; z-index:5000;}
#bewareof { position:absolute; left:2%; width:40%; top:110%; z-index:4000;}
#twitter { position:absolute; left:100%; top:0%; width:75%; z-index:5000;}
#facebook { position:absolute; left:105%; top:0%; width:75%; z-index:5000;}
#acknowledgement { position:absolute; top:95%; left:-195%; font-size:10pt; width:500%; font-family: Verdana, Arial, Helvetica, sans-serif; z-index:4000;}
#custom404{ position:absolute; left:5%; top:60%; z-index:7000;}
/*======end Home==========*/

/* ========= About us ===========*/
#about {position:relative; top:2.5em; left:2%;}
#about01 { position:absolute; left:33%; top:10em; padding:0.5em; }
#about02 { position:absolute; left:-50%; top:-7em; padding:0.5em; }
/* ========= end About us ===========*/

/*============== archives dicography bands albums==============*/
#archivehome {position:relative; top:3em; left:2%; z-index:5000;}
#archiveheader {position:absolute; left:3%; top:12%; width:99%; z-index:9000;}
#archiveimg {position:absolute; left:1%; top:45%; width:99%; z-index:4000;}
#discimg {position:absolute; left:10%; top:25%; z-index:100;}
#discmainbody { position:relative; left:3%; top:3em; width:97%; font-size: 5.5hw; background-color: #000000; z-index:4000; }
#discheader { position:absolute; left:3%; top:7%; width:99%; font-size: 5.9vh; z-index:5000;}
#blindfaith { position:relative; left:0%; top:1%; width:97%; z-index:4000;}
#cream { position:relative; left:0%; top:1%; width:97%; z-index:4000;}
#fresh { position:relative; left:0%; top:1%; width:97%; z-index:4000;}
#wheels { position:relative; left:0%; top:1%; width:97%; z-index:4000;}

/*============== press archives ==============*/
#pressarchive75 { position:relative; left:2%; top:1%; width:97%; z-index:4000;}
#pressarchive74 { position:relative; left:0%; top:3%; width:97%; z-index:4000;}
#pressarchive72 { position:relative; left:0%; top:3%; width:100%; z-index:4000;}
#pressarchive71 { position:relative; left:0%; top:3%; width:100%; z-index:4000;}
#pressarchive70 { position:relative; left:0%; top:3%; width:100%; z-index:4000;}
#pressarchive69 { position:relative; left:0%; top:3%; width:100%; z-index:4000;}
#pressarchive68 { position:relative; left:0%; top:3%; width:97%; z-index:4000;}
#pressarchive67 { position:relative; left:0%; top:3%; width:97%; z-index:4000;}
#pressarchive66 { position:relative; left:0%; top:3%; width:97%; z-index:4000;}
#pressarchive65 { position:relative; left:0%; top:3%; width:97%; z-index:4000;}
#pressarchive64 { position:relative; left:0%; top:3%; width:97; z-index:4000;}

/*============== history archives ==============*/
#histarchive77-80 { position:relative; left:2%; top:1%; width:97%; z-index:4000;}
#histarchive74-76 { position:relative; left:0%; top:1%; width:97%; z-index:4000;}
#histarchive72-74 { position:relative; left:0%; top:1%; width:97%; z-index:4000;}
#histarchive71 { position:relative; left:0%; top:1%; width:100%; z-index:4000;}
#histarchive70 { position:relative; left:0%; top:1%; width:100%; z-index:4000;}
#histarchive69 { position:relative; left:0%; top:1%; width:100%; z-index:4000;}
#histarchive68 { position:relative; left:0%; top:1%; width:100%; z-index:4000;}
#histarchive67 { position:relative; left:0%; top:1%; width:97%; z-index:4000;}
#histarchive66 { position:relative; left:0%; top:1%; width:97%; z-index:4000;}
#histarchive65 { position:relative; left:0%; top:1%; width:97%;z-index:4000;}

/*============== video archives ==============*/
#vidheader {position:absolute; left:3%; top:2.5em; z-index: 6000;}
#vid2005 {position:absolute; left:32%; top:4em; z-index: 6000;}
#vidimg1 {position:absolute; left:10px; top:110px; z-index: 3000;}
#vidimg2 {position:absolute; left:10px; top:1380px; z-index: 3000;}
#vidimg3 {position:absolute; left:10px; top:1780px; z-index: 3000;}
#vidimg4 {position:absolute; left:10px; top:2780px; z-index: 3000;}
#archivevid1 {position:absolute; left:29px; top:135px; width:250px; height:auto; padding:0.5em; z-index: 4000;}
#archivevid2 {position:absolute; left:29px; top:300px; width:250px; height:auto; padding:0.5em; z-index: 4000;}
#archivevid3 {position:absolute; left:29px; top:465px; width:250px; height:auto; padding:0.5em; z-index: 4000;}
#archivevid4 {position:absolute; left:29px; top:630px; width:250px; height:auto; padding:0.5em; z-index: 4000;}
#archivevid5 {position:absolute; left:29px; top:795px; width:250px; height:auto; padding:0.5em; z-index: 4000;}
#archivevid6 {position:absolute; left:29px; top:960px; width:250px; height:auto; padding:0.5em; z-index: 4000;}
#archivevid7 {position:absolute; left:29px; top:1139px; width:250px; height:auto; padding:0.5em; z-index: 4000;}
#archivevid8 {position:absolute; left:29px; top:1408px; width:250px; height:auto; padding:0.5em; z-index: 4000;}
#archivevid9 {position:absolute; left:29px; top:1579px; width:250px; height:auto; padding:0.5em; z-index: 4000;}
#archivevid10 {position:absolute; left:29px; top:1741px; width:250px; height:auto; padding:0.5em; z-index: 4000;}
#archivevid11 {position:absolute; left:29px; top:1905px; width:250px; height:auto; padding:0.5em; z-index: 4000;}
#archivevid12 {position:absolute; left:29px; top:2070px; width:250px; height:auto; padding:0.5em; z-index: 4000;}
#archivevid13 {position:absolute; left:29px; top:2235px; width:250px; height:auto; padding:0.5em; z-index: 4000;}
#archivevid14 {position:absolute; left:29px; top:2410px; width:250px; height:auto; padding:0.5em; z-index: 4000;}
#archivevid15 {position:absolute; left:29px; top:2565px; width:250px; height:auto; padding:0.5em; z-index: 4000;}
#archivevid16 {position:absolute; left:29px; top:2730px; width:250px; height:auto; padding:0.5em; z-index: 4000;}


/*============= gear, lyrics =============*/
#gear { position:absolute; left:2%; top:7%; width:90%; font-size: 5.5hw; z-index:4000;}
#lyricinfo {position:relative; left:5%; top:10%; width:95%; font-size: 3hw; font-weight: normal; text-align: left; 
            color: #663333; font-family: Georgia, "Times New Roman", Times, serif; }
#lyrics {position:absolute; left:8%; top:15%; width:85%; z-index:4000; }
#lyricbgimg {position:absolute; left:2%; top:8%; width:90%; z-index:100;}
.lyrictitle { font-size: 4.5hw; font-weight: bold; color: #663333; font-family: Georgia, "Times New Roman", Times, serif;}
.lyrictext { font-weight: bold; color: #663333; font-family: Georgia, "Times New Roman", Times, serif; text-align:center;}
.lyricfacts { font-size: 3hw; font-weight: bold; color: #663333; font-family: Georgia, "Times New Roman", Times, serif; text-align:left;}
.lyricinfos { font-weight: normal; text-align:left;}
#sunshine { position:relative; left:0%; top:1%; width:100%; }
#bringdown { position:relative; left:0%; top:1%; width:100%; }
#pressedrat { position:relative; left:0%; top:1%; width:100%; }
/*============= gear, lyrics =============*/
.borderstyle {
    background-color: #000000;
    border: 0.5px;
	border-top-color: #333333;
	border-top-style: solid;
	border-top-width: 0.5px;
	border-right-color: #333333;
	border-right-style: solid;
	border-right-width: 0.5px;
	border-bottom-color: #333333;
	border-bottom-style: solid;
	border-bottom-width: 0.5px;
	border-left-color: #333333;
	border-left-style: solid;
	border-left-width: 0.5px;
}
html, body {
    height:100%;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 3.2hw;
	color: #FFFFFF; 
}
h2:before { 
  display: block; 
  content: " "; 
  margin-top: -50px; 
  height: 50px; 
  visibility: hidden; 
}
body {
	background-color: #000000;
	background-image: url();
}
.style1 {
	color: #FF0000;
	font-size: 5.9vh;
	font-family: Georgia, "Times New Roman", Times, serif;
	line-height: normal;
}	 
.style2 {
	font-size: 6.4vh;
	color: #FFFFFF;
	font-family: Georgia, "Times New Roman", Times, serif;
	height: auto;	
}
.style3 {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 4.5vh;
	color: #FFFFFF;
}
.style6 {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 4.0vh;
} 
.bodytextsmall { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 1.9vh; color: #FFFFFF; text-align: left; }
.bodytextbig { font-size: 3vh; text-align: left; }
.bodytext { font-size: 3vh; text-align: left; }
.transparency {
	filter:alpha(opacity=80);
	-moz-opacity:0.80;
	-khtml-opacity: 0.80;
	opacity: 0.80;
}
::-webkit-scrollbar {
  height: 0;
  width: 0;
  color: transparent;
}

/* =main menu for small devices== */
#navdrop,
#navdrop ul,
#navdrop ul li,
#navdrop ul li a,
#navdrop #menu-button {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  z-index: 8000;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#navdrop:after,
#navdrop > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#navdrop #menu-button {
  display: none;
}
#navdrop {
  width: 100%;
  position:fixed;
  font-family: Montserrat, sans-serif;
  background: #111212;
}
#navdrop > ul > li {
  float: left;
}
#navdrop.align-center > ul {
  font-size: 0;
  text-align: center;
}
#navdrop.align-center > ul > li {
  display: inline-block;
  float: none;
}
#navdrop.align-center ul ul {
  text-align: left;
}
#navdrop.align-right > ul > li {
  float: right;
}
#navdrop > ul > li > a {
  padding: 17px;
  font-size: 12px;
  letter-spacing: 1px;
  text-decoration: none;
  color: #dddddd;
  font-weight: 700;
  text-transform: uppercase;
}
#navdrop > ul > li:hover > a {
  color: #ffffff;
  background: #000000;
}
#navdrop > ul > li.has-sub > a {
  padding-right: 30px;
}
#navdrop > ul > li.has-sub > a:after {
  position: absolute;
  top: 22px;
  right: 11px;
  width: 8px;
  height: 2px;
  display: block;
  background: #dddddd;
  content: '';
}
#navdrop > ul > li.has-sub > a:before {
  position: absolute;
  top: 19px;
  right: 14px;
  display: block;
  width: 2px;
  height: 8px;
  background: #dddddd;
  content: '';
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
}
#navdrop > ul > li.has-sub:hover > a:before {
  top: 23px;
  height: 0;
}
#navdrop ul ul {
  position: absolute;
  left: -9999px;
}
#navdrop.align-right ul ul {
  text-align: right;
}
#navdrop ul ul li {
  height: 0;
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
}
#navdrop li:hover > ul {
  left: auto;
}
#navdrop.align-right li:hover > ul {
  left: auto;
  right: 0;
}
#navdrop li:hover > ul > li {
  height: 35px;
}
#navdrop ul ul ul {
  margin-left: 100%;
  top: 0;
}
#navdrop.align-right ul ul ul {
  margin-left: 0;
  margin-right: 100%;
}
#navdrop ul ul li a {
  border-bottom: 1px solid rgba(150, 150, 150, 0.15);
  padding: 11px 15px;
  width: 170px;
  font-size: 12px;
  text-decoration: none;
  color: #dddddd;
  font-weight: 400;
  background: #333333;
}
#navdrop ul ul li:last-child > a,
#navdrop ul ul li.last-item > a {
  border-bottom: 0;
}
#navdrop ul ul li:hover > a,
#navdrop ul ul li a:hover {
  color: #ffffff;
  background: #000000;
}
#navdrop ul ul li.has-sub > a:after {
  position: absolute;
  top: 16px;
  right: 11px;
  width: 8px;
  height: 2px;
  display: block;
  background: #dddddd;
  content: '';
}
#navdrop.align-right ul ul li.has-sub > a:after {
  right: auto;
  left: 11px;
}
#navdrop ul ul li.has-sub > a:before {
  position: absolute;
  top: 13px;
  right: 14px;
  display: block;
  width: 2px;
  height: 8px;
  background: #dddddd;
  content: '';
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
}
#navdrop.align-right ul ul li.has-sub > a:before {
  right: auto;
  left: 14px;
}
#navdrop ul ul > li.has-sub:hover > a:before {
  top: 17px;
  height: 0;
}
}
/* ----Nokia Lumia 460x768--------- */
@media all and (min-width: 26em) and (orientation: portrait){
#baker { left:20%; font-size: 7vh; }
#bewareof { left:4%; width: 30%; }
#about01 {left:44%; top:10em; padding:0.5em; }
#about02 {left:-90%; top:-7em; padding:0.5em; }
}
/* ----Nokia XL 480x800-------- */
@media all and (min-width: 30em) and (orientation: portrait){
#baker { left:18%; }
#bewareof { left:6%; }
.body{ font-size:2vw; }
.style3 { font-size: 3.5vh; }
.bodytextbig { font-size: 2.5vw; }
.bodytext{ font-size: 2vw; }
}
/* ----blackberry Q10 480x480-----*/
@media all and (min-width: 30em) and (max-height: 480px){
#baker { left:22%; top: 40%; font-size: 10vw; }
#bewareof { left:8%; }
#acknowledgement { left:-125%; font-size:3vh;}
}
/*-----Kindle Fire, Playbook-----600x1024-----*/
@media all and (min-width: 37em) and (orientation: portrait){
#ginger2 { left:5%;}
#baker { left:18%; top: 50%; font-size: 6vh;}
#bewareof { left:10%; width:30%;}
#acknowledgement { left:-125%; font-size:1.2vh; }
}
/* ----iPad Mini 768x1024 portrait --------- */
@media all and (min-width: 48em) and (orientation: portrait){
#ginger2 { left:10%;}
#lyrics {left:4%; }
#lyricinfo {left:9%; width:85%; }
}
/* ----Surface RT 768x1366 portrait --------- */
@media all and (min-width: 48em) and (height:1366px) and (orientation: portrait){
#ginger2 { left:12%;}
#baker { font-size: 4vh;}
#lyrics {left:4%; }
#lyricinfo {left:9%; width:85%; }
}

/* ----Nexus 10 800x1280  potrait------------*/
@media all and (min-width: 50em) and (orientation: portrait) {
#ginger2 { left:15%;}
#baker { left:18%; top:60%; font-size: 5vh;}
#bewareof { left:10%; width: 28%;}
#lyrics {left:4%; }
#lyricinfo {left:8%; width:83%; }
#about01 { left:44%; top:15em; padding:0.5em; }
#about02 { left:-90%; top:-7em; padding:0.5em; }
}
/* ----iPad Pro 1024x1366 ------------- */
@media all and (min-width: 64em) and (orientation: portrait) {
#ginger2 { left:20%;}
#baker { left:15%;}
#bewareof { width: 27%;}
#lyrics {left:-2%; }
#lyricinfo {left:7%; width:75%; }
}
/* =========landscape - Blackberry Storm, iPhone 3GS, iPhone4,5 landscape 320x480========= */
@media all and (min-width: 15em) and (orientation: landscape){
#ginger2 {left:-1%;}
#baker { left:22%; top:28%; font-size: 15vh; }
#bewareof { left:7%; top:100%; width:32%;}
#acknowledgement { left:-90%; top:90%; font-size:4vh;}
#custom404{ left:10%; top: 70%;}
.bodytextsmall { font-size: 2vw; }
#about01 { left:42%; top:3em; }
#about02 { left:-95%; top:-6%; }
}
/* ----Nokia Lumia 460x768--------- */
@media all and (min-width: 26em) and (orientation: landscape) {
#baker { left:20%; top:30%;}
#bewareof { left:8%; }
#custom404{ left:10%; top:75%;}
}
/* ----Nokia XL 480x800-------- */
@media all and (min-width: 30em) and (orientation: landscape){
}
/* =========HTC iPhone6, 360x640 ======== */
@media all and (min-width: 35em) and (max-height:736px) and (orientation: landscape){
#custom404{ left:10%; top:75%;}
}
/*--------600x1024-----*/
@media all and (min-width: 37em) and (orientation: landscape){
#ginger2 {left:5%;}
#baker {font-size:8vw; }
#acknowledgement { font-size:2.1vw;}
#custom404{ left:10%; top:70%;}
#lyrics {left:4%; }
#lyricinfo {left:12%; width:85%; }
#about01 { top:5em; }
#about02 { top:-6%; }
}
/* ----iPad Mini 768x1024  Nokia Lumia--------- */
@media all and (min-width: 48em) and (orientation: landscape){
#ginger2 {left:15%;}
#baker { left:17%; top:44%;}
#bewareof { left:12%; width:30%;}
#lyrics {left:-5%; }
#lyricinfo {left:10%; width:80%; }
#about01 { top:6em; }
}
/* ---  Nexus 9--------- */
@media all and (min-width: 48em) and (max-height:1024px) and (orientation: landscape){
}
/* ---  Nokia XL--------- */
@media all and (min-width: 48em) and (max-height:1366px) and (orientation: landscape){
#lyrics {left:3%; }
#lyricinfo {left:18%; width:70%; }
#ginger2 {left:18%;}
#baker { font-size: 7vw;}
#acknowledgement { font-size:2vw;}
#custom404{ left:10%; top: 70%;}
}
/* ----Fire, iPad mini, Nexus 10 800x1280  potrait------------*/
@media all and (min-width: 55em) and (orientation: landscape) {
#baker { font-size: 6vw;}
#acknowledgement { font-size:1.6vw;}
#lyrics {left:-6%; }
#lyricinfo {left:18%; width:65%; }
}
/* ---- Nexus 10, Galaxy Note-- 800x1280------------*/
@media all and (min-width: 65em) and (orientation: landscape){
#baker { font-size: 5vw; }
#bewareof { width: 28%; }
#acknowledgement { font-size:1.1vw;}
#lyrics {left:-15%; }
#lyricinfo {left:22%; width:52%; }
#about01 { left:35%; }
}
@media all and (min-width: 84em) and (orientation: landscape){
#ginger2 {left:24%;}
#baker { left:14%; font-size: 4.8vw; top:54%;}
#bewareof { left:10%;  }
}
/* ----full screen 1349x653-----------*/
@media all and (min-width: 1280px) and (max-height: 653px){
#custom404{ left:20%; }
#lyrics {left:-15%; }
#lyricinfo {left:22%; width:55%;}
#about01 { left:35%; }
}