/**
i am super embarrassed about how shitty this is set up (no judgements, robert)
but its working. the basic idea is that the rug-pattern image
is black and white, and I am using CSS to put  colored box over 
it with opacity < 1 (so it is transparent). the effect is what you
see in all the headers. 

I don't know how to use variables in css, but my vision is to have
multiple color schemes that come up randomly as the user clicks through.
so essentially we have 5 or 10 copies of this style.css (style.black.css, style.blue.css, etc.)

**/

/**
blue #264188 #D9BE77
**/

.cssnav	{
position:relative;
background-image:  url(raven.pink.smaller.gif);
background-repeat: no-repeat;
white-space: nowrap;
display: block;
width: 400px;
height: 293px;
margin: 0; 
padding: 0; 
}
.cssnav a {
display: block;
color: #000000;
font-size: 11px;
width: 400px;
height: 293px;
display: block;
float: left;
color: black; 
text-decoration: none;
}

.cssnav img {width: 400px; height: 293px; border: 0; }
* html a:hover {visibility:visible}
.cssnav a:hover img{visibility:hidden}


IMG.hoverb{
border:5px solid #FFFFFF;
}
IMG.hoverb:hover{
border:5px solid #000000;
}


.centered {
text-align: center;
margin: 75px 1px 1px 1px;
width:100%;
}

.centered img {
opacity: 1;
max-width: 100%;
height: auto;
}

.centered h1 {
text-align: center;
color: white;
}

body.top 
{
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
/*background-color:#cccccc;*/
background-color:#ecffb0;

}

body.fullbg
{
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
background-image:url('bw.jpg');
background-repeat:repeat-xy;
}



a.nav{
margin:20px;
color:#ffffff;
text-decoration:underline;
font-size:1.2em;
font-weight:bold;
}

a.curr
{
pointer-events: none;
cursor: default;
font-weight:bold;
margin:20px;
color:#000000;
font-size:1.2em;
background-color:#2bdff3;
}

div.imgbox {
background-image:url('bw.jpg');
background-repeat:repeat-xy;
}

div.transbox{
/*background-color:#000000;*/
background-color:#e7f3a5;
/*color:#ffffff;*/
color:#000000;
border:2px solid #FFFFFF;
opacity:0.7;
filter:alpha(opacity=70); /* For IE8 and earlier */
zoom:1;

}

div.transbox p
{
 font-weight:bold;
 opacity:1.0;
filter:alpha(opacity=100);
zoom:1;
}

div.transbox h1
{
margin:20px;
font-weight:bold;
line-height: 100%;
font-size:2.5em;
}

div.transbox h2
{
margin:20px;
font-weight:bold;
line-height: 100%;
font-size:2em;
}

div.transbox h3
{
margin:20px;
font-weight:bold;
font-size:1.2em;
line-height:100%;
}

div.transbox h4
{
margin:20px;
font-weight:bold;
font-size:1em;
line-height: 100%;
}

div.transbox img
{
opacity:1.0;
filter:alpha(opacity=100);
zoom:1;
}

#imglink
{
margin-left: auto;
margin-right: auto;
}

table.albums 
{
width:100%;
border-collapse:collapse;
}
table.albums tr
{
border:none;
color:#000000;
/*background-color:#cccccc;*/
background-color:#c1df1f;
width:100%;
}
table.albums td
{
padding:5px 5px 5px 5px;
vertical-align:top;
text-align:center;
}
table.albums img{
max-width:100%;
  height:auto;
  max-height:100%;
}

div.pics img{
max-width:100%;
  height:auto;
  max-height:100%;
}


table.songs 
{

border-collapse:collapse;
}
table.songs td
{
font-size:0.9em;
padding:5px 5px 5px 5px;
vertical-align:top;
text-align:center;
}
table.songs th 
{
font-size:1.1em;
text-align:left;
}
table.songs tr.alt 
{
background-color:#555555;
vertical-align:top;
color:#eeeeee;
}
table.songs tr 
{
color:#000000;
background-color:#bbbbbb;
}
table.songs img
{
width:auto;
height:auto;
}
table.songs a
{
color:#000000;
text-decoration:underline;
}
table.songs a.alt
{
color:#eeeeee;
text-decoration:underline;
}

table.paypal 
{
width:auto;
margin-left:auto;
margin-right:auto;
border-collapse:collapse;
}
table.paypal td
{
font-size:0.9em;
padding:2px 2px 2px 2px;
vertical-align:top;
text-align:center;
}


pre.spacer{
line-height: 60%;
}


.video-container {
	position:relative;
	padding-bottom:56.25%;
	padding-top:30px;
	height:0;
	overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

img {
    image-orientation: from-image;
}