/* CSS Stylesheet */

body {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	margin-top: 0;
	background:#c3dee2;
}
.clear	
{clear:both;
font-size:1px;
}
/* ----------------------------------- typography */
p
{
font-size: 12px;color:#333;
line-height:150%;
}
.headline
{font-size: 11px;color:#333;
line-height:175%;
padding: 0 10px;}

#sidebar p
{color: white;
line-height: 100%;
font-size: 11px;}
small, .small
{font: normal 10px "Trebuchet MS", Arial, Helvetica, sans-serif;
color: black;
text-transform: lowercase;}

.error
{font:normal 9px Arial, Helvetica, sans-serif;
letter-spacing:150%;
color: #dd0000;}


h1,h2,h3,h4, h5, h6
{font-family: Georgia, Times, serif;
}

h1
{
font-family:"Arial Black", Gadget, sans-serif;
text-transform: uppercase;
color: #cc0000;
font-size: 20px;
padding: 14px 14px 0px 0px;
margin-top:0;
}

h2
{border-bottom: 2px solid #506f8a;
font-size:15px;
padding-bottom: 4px;
margin-top:0px;
color: #506f8a;
}

h3
{font-size:14px;}
h4, h5, h6
{color: white;}
h6
{
font-size: 18px;
margin-top:10px;
line-height:150%;}

h7
{font: normal 18px "Trebuchet MS", Arial, Helvetica, sans-serif;
color: black;
line-height:135%;}
.bigwhite
{color: #fff;
font: normal 18px "Trebuchet MS", Arial, Helvetica, sans-serif;
}
.red
{color: #990000;}
.black
{color: #000;}
a
{
color:#990000;
}

a:hover
{color: #990000;}


p a
{font-weight: bold;
color: black;}
ol.tracks
{ 
list-style:decimal;
font: normal 11px "Trebuchet MS", Arial, Helvetica, sans-serif;
letter-spacing:125%;
color: #444;
padding-top: 0px;
}
b {text-transform:uppercase;}
.link
{float: right;}

.credits
{font: normal 10px "Trebuchet MS", Arial, Helvetica, sans-serif;
line-height:90%;}

/* images */
img
{border:0px;}

.imgr /*right justify image */
{float:right;
margin:10px 0px 0px 20px;}

.imgl /*left justify image */
{float: left;
margin-right:20px;}

.button
{vertical-align: middle;
}

.download /*right justify download link */
{float:right;
margin:10px 0px 0px 20px;
font-weight: bold;}

.imgframer
{float:right;
margin:0px 0px 0px 10px;
border: 2px solid #e5e5e5;
}
.imgframel
{float:left;
margin:0px 10px 0px 0px;
border: 2px solid #e5e5e5;
}
.moreinfo, .moreinfo-small
{
padding-right: 10px;
background:url(str-images/arrowr.gif) no-repeat right;
color: black;
text-align:right;
font-weight: bold;
float: right;
}

.moreinfo-small
{font-size: 10px;
margin:8px 10px 0 0;}
/* Gallery classes */

.th 
{padding: 1px;
margin:0;
border:0;}

.lg
{padding: 1px 4px 4px 1px;
width: 622px;
}

.indent
{padding-left: 20px;}

.moveup
{margin-top: -3px;
border:0;}

/* ------------------------------------------------------------ Structure Containers */
#border
{width: 1200px;
margin: auto;
border-left: 4px double black;
border-right: 4px double black;
border-bottom: 4px double black;

background-color:#64aebb;
}
#all /* big container, keeping it centred */
{width: 1200px;
margin: auto;
padding-bottom:10px;
}

#content /* container for menu, main and sidebar */
{width:1000px;

margin:auto;
padding:0px 0px 0px 10px;

}

#main /* centered box where it all goes */
{
	/*background: url(str-images/mainbg.png); */
background: url(str-images/mainbg-brush.png) repeat-y;
width: 625px;
padding:10px 22px;
float:left;
position: relative;
top:-220px;
}


#sidebar
{float:left;
width: 150px;
height:auto;
margin-left:20px;
width:100px;
top:-227px;
position:relative;
}

#sidebar h5
{color: white;
margin-top: 0px;
border-bottom: 1px solid #ddd;
}
#leftcol
{width:287px;
float:left;
padding-right:15px;
margin-top:20px;
}

#rightcol, #rightcol-noline

{width:287px;
float:left;
padding-left:15px;
border-left:1px solid black;
margin-top:20px;
}

#rightcol-noline
{margin-left: 10px;
border:0;
padding-left: 25px;}
#bio-th-col, #songtitles
{float: left;
width: 120px;
cursor:pointer;
}

#songtitles
{height: 620px;}
#songtitles img
{padding-bottom: 10px;}

#biocol
{float: left;
padding-left: 20px;
width: 476px;
}
.bio-text
{position: absolute; 
top:470px;
width: 480px;
}
.songlyric
{position: absolute; 
top:92px;
width: 460px;
padding-left: 20px;
background: url(images/nothingtoworrybg.png) no-repeat;

}


#mark-bio, #myron-bio, #lorne-bio, #kevin-bio, #ivan-bio
{visibility: hidden;}
#mark-bio{
	visibility:hidden;
}


#allcoveredup, #amazinggrace, #whiskeyinthejar, #lonelyman, #youvegotnothing, #makeyoumine, #nothingtoworryabout, #inthepark, #makeachange, #meetmeintheriver,  #sixteentons, #riseup
{visibility:hidden;}

#allcoveredup
{visibility:visible;}

/* ------------------------------ boxes */
#home-box, #home-box-r
{	
background-color:#fff;
float:left;
height:auto;
margin:15px 5px 15px 10px;
padding:15px ;
position:relative;
width:265px;
}
#home-box-r
{float: right;
margin-right:10px;}
.home-box-bottom
{
	position : absolute;
	width : 295px;
	height : 8px; 
	margin-bottom : -1px;  /* this is for IE */
	background: transparent url(str-images/boxbottom-white.png) no-repeat;
	bottom:-7px;
	left:0;
}

.home-box-top
{	position : absolute;
	width : 295px;
	height : 8px; 
	margin-top : -1px;  /* this is for IE */
	top:-7px;
	left:0;
	background: transparent url(str-images/boxtop-white.png) no-repeat ; 
}

#home-box a, #home-box-r a
{text-decoration:none;}

#events-box
{	
background-color:#fff;
float:left;
height:auto;
margin:15px 5px 15px 10px;
padding:15px ;
position:relative;
width:594px;
}
#events-box  hr
{border:1px solid #efefef;
padding-bottom: 0px;}

.events-box-top
{	position : absolute;
	width : 625px;
	height : 8px; 
	margin-top : -1px;  /* this is for IE */
	top:-7px;
	left:0;
	background: transparent url(str-images/boxtop-events.png) no-repeat ; 
}
.events-box-bottom
{
	position : absolute;
	width : 625px;
	height : 8px; 
	margin-bottom : -1px;  /* this is for IE */
	background: transparent url(str-images/boxbottom-events.png) no-repeat;
	bottom:-7px;
	left:0;
}

#picturebox
{width: 296px;

margin:15px 5px 15px 10px;
float: left;
}
/* side bar box */
#side-box
{	
background-color:#323232;
float:left;
height:auto;
margin:15px 15px 15px 0;
padding:0 10px 10px 10px ;
position:relative;
width:143px;
}

.side-box-bottom
{
	position : absolute;
	width : 164px;
	height : 8px; 
	margin-bottom : -1px;  /* this is for IE */
	background: transparent url(str-images/sboxbottom.png) no-repeat;
	bottom:-7px;
	left:0;
}

.side-box-top
{	position : absolute;
	width : 164px;
	height : 8px; 
	margin-top : -1px;  /* this is for IE */
	top:-6px;
	left:0;
	background: transparent url(str-images/sboxtop.png) no-repeat ; /* #fffae5 */}
#side-box p
{line-height: 125%;}
#side-box .moreinfo
{
padding-right: 10px;
background:url(str-images/arrowwhite.png) no-repeat right;
color: white;
text-align:right;
font-weight: bold;
float: right;
font-size: 11px;
}
#side-box .moreinfo a
{color: white;
text-decoration:none;}
#side-box .moreinfo a:hover
{color: #990000;}


/* cream side bar box */
#cream-side-box
{	
background-color:#ecdba3;
float:left;
height:auto;
margin:15px 15px 15px 0;
padding:0 10px 10px 10px ;
position:relative;
width:143px;
}

.cream-side-box-bottom
{
	position : absolute;
	width : 164px;
	height : 8px; 
	margin-bottom : -1px;  /* this is for IE */
	background: transparent url(str-images/cream-box-b.png) no-repeat;
	bottom:-7px;
	left:0;
}

.cream-side-box-top
{	position : absolute;
	width : 164px;
	height : 8px; 
	margin-top : -1px;  /* this is for IE */
	top:-6px;
	left:0;
	background: transparent url(str-images/cream-box-t.png) no-repeat ; /* #fffae5 */}


#cream-side-box p
{color: black;}

#sampler
{
background: url(str-images/sampler-bg.png) no-repeat;
padding: 17px 0 0 17px;
font: bold 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #fff;
height: 60px;
width: 535px;
margin:auto;
}
#sampler .middle
{vertical-align:middle;}

#playerbg
{background: #64aebb;
margin:0;
border:0;}


/* ------------------------------------------------------------coloured backgrounds */
#yellowbg
{background-color:#FFFCDE;
padding:10px;}

/* ------------------------------------------------------------ CSS Menu ======== */
#menu-position
{
float:left;
margin-bottom:4px;
width: 96px;
position: relative;
top:-230px;
padding-left:40px;
padding-bottom:15px;

}
#menu-position a
{
	text-decoration:none;
	padding:4px 16px 4px 4px;
}

#menu-position .this
{
	color:#dd0000;   
	padding:4px 16px 4px 4px;  
	text-decoration:none;
	background: url(str-images/menu-reddiamond.png) no-repeat right;
}


.choice
{	margin-bottom:10px;
	float:right;
	padding-right:20px;
}


.menu 
{
   position:relative;
   list-style: none;
   font-weight: bold;
   font-family:"Arial Black", Gadget, sans-serif;
}

/* top of menu items */
.menu li{
	 display:block;
	 cursor:pointer;
   		padding:4px 0px 4px 4px;  
	 font-size:16px;
	 color:white;
	 font-weight:bold;
}

/* list a-links */
.menu li a{
   text-decoration:none;
   font-weight:normal;
	width: 150px;color:white;

}

/* top of menu, on mouse over */
.menu li:hover{
   color:#000;
   padding:4px 0px 4px 4px;  
   text-decoration:none; 
   background: url(str-images/menu-blackdiamond.png) no-repeat right;
}

/* drop down bit */
.menu li ul{
   position:absolute;
   white-space:normal;
   text-align:left;
   list-style:none;
   display:none;
   z-index:5;
   margin:-18px 0 0 110px;
   width:120px;
   padding:8px;
   border:1px solid #87d5f6;
	background:url(str-images/mainbg.png);
}

/* items in drop down */
.menu li ul li{
   position:relative;
   display: list-item;
   cursor:pointer; 
	width:100px;}

/* hover for items in dd */
.menu li a:hover{
   color:black;

}


/* keeps menu down on mouse over */
.menu li ul li a{
   display:block;
}

.menu li ul li a:hover{
		color:black;
		width:100px;
		background:none;
}
.menu li ul li:hover
{background:None;}
/*position of drop down */
.menu li:hover > ul{
   display:block;
   	left:0px;
}

/* ================================================ */

#endlinks
{	background: url(str-images/1200-wide-bg-btm.png) no-repeat top;
	margin: auto;
	width:1200px;
	font: normal 11px;
	text-align:center;
	color: #000;
	margin-top:-260px;
	height:250px;
}
#links
{	clear: both;
	position:relative;
	top: 75px;
	margin-top: -20px;

	}
#links .small
{font-size:9px;}

#links  a
{	
	color: #000;
	font: normal 11px;

}
#links a:hover
{color: #990000;}