@charset "iso-8859-1";

/*******************************************************************************
*  skidoo_too.css : 2005.03.07
* -----------------------------------------------------------------------------
*  A remake of the skidoo layout with the middle column appearing first in
*  source ordering.
*******************************************************************************/

/* begin with generic selectors so that they can be overridden if needed
 * by classes deeper in the stylesheet
 */

.clear
{
	clear: both;
}
.hide
{
	display: none;
}
.inside
{
	/* glitch in IE caused by vertical padding in this class, so 0 padding is
	 * set here and those blocks that need the vertical padding must be 
	 * applied to the parent element. the purpose of this class is to provide
	 * horizontal padding without using hacks to get around IE's broken box 
	 * model. so it's okay to apply vertical padding to the parent element, 
	 * just not horizontal padding.
	 */
	padding: 0 1em;
}
html[xmlns] .mozclear
{
	/* this selector should be valid CSS, but Opera 7.5 (and above) will pick
	 * this up as well. Shouldn't be a problem, Opera should handle this fine,
	 * but it's a Mozilla-targeted hack, and it should probably only affect
	 * mozilla. You can do that by replacing the INVALID CSS selector
	 * :root .mozclear for what's given here.
	 */
	border-bottom: 1px solid;
	border-color: transparent;
	margin-bottom: -1px;
}

/* margin values and font sizes for headings, and margins on paragraphs
 * and lists are not consistent across browser platforms. to achieve a
 * consistent look we need to explicity set these values here. it may
 * seem an odd way to declare the margins like this but you never
 * know what kind of horizontal padding a browser may be using on an
 * element, and I only want to change the vertical padding.
 *
 * pixels are used here, rather than ems, because I want a consistent
 * margin on the different headings. if I use ems, 1em for an h1 element
 * is much larger than 1em on an h6 element. I don't wnat this.
 *
 * salt to taste
 */

ul, ol, dl, p, h1, h2, h3, h4, h5, h6
{
	margin-top: 14px;
	margin-bottom: 14px;
	padding-top: 0;
	padding-bottom: 0;
}
h1
{
	font-size: 220%;
}
h2
{
	color: #A20E0E;
	font-size: 125%;
	font-weight: normal;
	font-variant: small-caps;
	background-image: url(../images/h2bg.gif);
	background-position: left bottom;
	background-repeat: no-repeat;
	line-height: 50px;
	padding-left: 10px;
	margin: 0;
    width: 90%;
}
h3
{
	color: #A20E0E;
	font-size: 105%;
	font-variant: small-caps;
	font-weight: normal;
}

th h3 {
    margin: 0;
    padding: 0;
}
h4
{
	font-size: 130%;
}
h5
{
	font-size: 100%;
}
h6
{
	font-size: 70%;
}

/* alter some HTML elements' default style
 */
a:link, #rightColumn a:visited {
	color: #CC0000;
}

a:hover, a:active {
	color: #DF5D4A;
}
#middleColumn a:visited {
	color: #E88B6F;
	padding-right: 20px;
	background-image: url(../images/tick.gif);
	background-position: right;
	background-repeat: no-repeat;
}

code
{
	font-family: "Courier New", Courier, monospace;
}
label
{
	cursor: pointer;
}
table
{
	font-size: 100%;
}
td, th
{
	vertical-align: top;
}

/* now we craft the core layout of the page. this includes positioning and
 * gutter space. colors and fonts should not come into play at this point.
 * when defining a border, default its color to white which is probably
 * the safest thing to do.
 */

body
{
	padding: 0;
	margin: 0;
}
#pageWrapper
{
	margin: 0 0;		/* set side margins here 'cause IE doesn't like it set
				   on the body element */
	min-width: 40em;	/* IE doens't understand this property. I use ems rather
				   than pixels so that the layout shouldn't break even
				   when the browser's default size is set very large */
	width: auto;
}
#outerColumnContainer
{
	/* reserves space for the left and right columns. you can use either
	 * padding, margins, or borders, depending on your needs. however you
	 * can use the border method to create a background color for both left
	 * and right columns
	 */
	border-left: solid 14em #fff;
	border-right: solid 250px #fff;
}
#innerColumnContainer
{
	margin: 0 -1px;		/* compensate for the borders because of
				   100% width declaration */
	width: 100%;
	z-index: 1;
}
#leftColumn, #middleColumn, #rightColumn, * html #SOWrap
{
	overflow: visible;	/* fix for IE italics bug */
	position: relative;	/* fix some rendering issues */
}
#SOWrap
{
	float: left;
	margin: 0 -1px 0 0;
	width: 100%;
	z-index: 3;
	background-image: url(../images/tlpadding.gif);
	background-position: 0 0;
	background-repeat: no-repeat;
    min-height: 300px;
    height: auto; 
/*    _height: 300px;*/
}
#middleColumn
{
	float: right;
	margin: 0 0 0 -1px;
	width: 100%;
	z-index: 5;
}

#middleColumn .inside {
    padding-left: 80px;
}
#leftColumn
{
	float: left;
	margin: 0 1px 0 -14em;
	width: 14em;
	z-index: 4;
    
}
#rightColumn
{
	float: right;
	width: 250px;
	margin: 0 -250px 0 1px;
	z-index: 2;
	background-image: url(../images/sidebarbg.gif); 
/*                   background-image: url(../images/pine.jpg);*/
	background-position: top right;
	background-repeat: no-repeat;
}

#rightColumn .inside {
	background-position: top left;
	background-repeat: no-repeat;
    padding: 60px 5px 0 90px;
    height: 200px;
}
#footer
{
	border: solid 1px #fff;
	border-width: 1px 0;
	padding: 0.5em;
}

body
{
	font-size: 100.1%;
}
html>body
{
	/* Opera's default font size is typically 10% smaller than IE or Mozilla
	 * so we correct for this here, since we're using percentages 
	 * everywhere. And we do this because pixel-based fonts don't resize
	 * under IE/Win and percentages/ems are essentially the same, and I like
	 * percentages for fonts.
	 */
	font-size: 110%;
}
* html body
{
	/* of course the previous selector for Opera's fix is caught by more 
	 * than a few other browsers, so we reset that value here.
	 */
	font-size: 100.1%;
}

/* everything below this point is related to the page's "theme" and could be
 * placed in a separate stylesheet to allow for multiple color/font scemes on
 * the layout. you should probably leave a default theme within this stylesheet
 * just to be on the safe side.	
 */

#pageWrapper, #masthead, #innerColumnContainer, #footer, .vnav ul, .vnav ul li, .hnav, .hnav ul li a
{
	border: none;
}
body
{
	background-color: #FFFFCC;
    background-image: url(../images/bg.gif);
    color: #333333;
    font-family: Georgia, Times, serif;
}
#pageWrapper
{
	font-size: 14px;	/* set your default font size here. */
}
#masthead
{
    background-image: url(../images/line.gif);
    background-position: 0 0;
    background-repeat: repeat-x;
    background-color: #333333;
    border-bottom: 1px solid #FFF;
    padding: 0;
}
#navigation {
	width: 100%;
	float: left;
	font-size: small;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid #333;
	border-top: 5px solid #333;
	background-color: #FFFFEC;
    white-space: nowrap;
}

#navigation ul {
	padding: 0 0 0 25px;
}

#navigation li {
	float: left;
	margin: 0; 
	padding: 0;
	display: inline;
	list-style: none;
}

#navigation a:link, #navigation a:visited
{
	float: left;
	font-size: 90%;
	line-height: 20px;
	font-weight: bold;
	margin: 0 10px 0 10px;
	text-decoration: none;
	color: #666666;
	padding-bottom: 6px;
}

#navigation a.active:link, #navigation a.active:visited, #navigation a:hover {
	border-bottom: 4px solid #333333;
	padding-bottom: 2px;
	color: #333333;
}

#home a:link#nav-home, #home a:visited#nav-home {
	border-bottom: 4px solid #CC0000;
	padding-bottom: 2px;
	color: #CC0000;
}

#news a:link#nav-news, #news a:visited#nav-news {
	border-bottom: 4px solid #CC0000;
	padding-bottom: 2px;
	color: #CC0000;
}

#about a:link#nav-about, #about a:visited#nav-about {
	border-bottom: 4px solid #CC0000;
	padding-bottom: 2px;
	color: #CC0000;
}

#music a:link#nav-music, #music a:visited#nav-music {
	border-bottom: 4px solid #CC0000;
	padding-bottom: 2px;
	color: #CC0000;
}

#video a:link#nav-video, #video a:visited#nav-video {
	border-bottom: 4px solid #CC0000;
	padding-bottom: 2px;
	color: #CC0000;
}

#gallery a:link#nav-photo, #gallery a:visited#nav-photo {
	border-bottom: 4px solid #CC0000;
	padding-bottom: 2px;
	color: #CC0000;
}

#concerts a:link#nav-concerts, #concerts a:visited#nav-concerts {
	border-bottom: 4px solid #CC0000;
	padding-bottom: 2px;
	color: #CC0000;
}

#feedback a:link#nav-feedback, #feedback a:visited#nav-feedback {
	border-bottom: 4px solid #CC0000;
	padding-bottom: 2px;
	color: #CC0000;
}

#contacts a:link#nav-contacts, #contacts a:visited#nav-contacts {
	border-bottom: 4px solid #CC0000;
	padding-bottom: 2px;
	color: #CC0000;
}
#outerColumnContainer
{
	border-left-color: #ded;	/* left column background color */
	border-right-color: #FFFFCC;	/* right column background color */
}
#rightColumn .inside
{
	/* if you apply a font size to just #rightColumn, then its width,
	 * which is specified in EMs, will also be affected. you don't want
	 * that. so apply font size changes to the .inside element which exists
	 * inside underneath all three columns
	 */
/*	font-size: 95%;*/
}
#footer
{
	background-image: url(../images/footerbg.gif);
	background-position: 0 0;
	background-repeat: no-repeat;
	height: 95px;
	color: #DADADA;
	font-family: "Lucida Sans Unicode", Verdana, Tahoma, Arial, sans-serif;
	font-size: 10px;
	padding: 40px 50px 0 50px;
	margin-top: 50px;
    line-height: 11px;
    white-space: nowrap;
}
#footer span {
    background-color: #333333;
}

#footer a:link, #footer a:visited, #footer a:hover, #footer a:active {
	color: #FFFFFF;
	text-decoration: none;
}

.play_list {
    border-collapse: collapse;
}

.play_list th {
    background-image: url(../images/authorbg.gif);
    border: 1px solid #333333;
    padding: 0.2em 0.5em 0.2em 0.5em;
}

.play_list td {
    padding: 0.2em 0 0.2em 1em;
    border-bottom: 1px solid #333333;
}

.play_list td.title {
    padding: 0.2em 0 0.2em 0;
}

.play_list tr:hover {
    background-color: #ececbe;
}
.more {
	font-family: "Lucida Sans Unicode", Verdana, Tahoma, Arial, sans-serif;
	font-size: 0.8em;
	text-align: right;
}

.more a, a.more {
    background-color: #CC0000;
    color: #FFFFCC !important;
    text-decoration: none;
    text-transform: uppercase;
}

.more a:hover, a.more:hover {
    background-color: transparent;
    color: #CC0000 !important;
    text-decoration: underline;
}

.author {
	background-image: url(../images/authorbg.gif);
	margin: 5px 0 5px 20px;
	padding: 5px;
	font-style: italic;
	width: 50%;
}
ul.news-block li {
  line-height: 2em;
  list-style-type: none;
  padding-left: 30px;
  background-image: url(../images/bullet.gif);
  background-position: left;
  background-repeat: no-repeat;
}
#contacts fieldset, #feedback fieldset {
  border: none;
}

#contacts legend, .msg, #feedback legend {
  font-size: larger;
  font-style: italic;
  color: #333333;
  line-height: 300%;
}

.msg {
  padding-left: .7em;
}

#contacts label, #contacts input, #contacts textarea, #feedback label, #feedback input, #feedback textarea {
	display: block;
	width: 30%;
	float: left;
	margin-bottom: 10px;
  font-family: Georgia, Times, serif;
  font-size: 100%;
  color: #6B6B5D;
  padding: 2px;
}

#contacts input, #contacts textarea, #feedback input, #feedback textarea {
  background-color: #ECECBE;
  border: 3px double #A2A286;
}

#contacts input:focus, #contacts textarea:focus, #feedback input:focus, #feedback textarea:focus {
  background-color: #FFFFE3;
  color: #333333;
}

#contacts textarea, #feedback textarea {
  width: 50%;
}

#contacts #submit, #feedback #submit {
  width: 120px;
  border: 3px double #A2A286;
  background-color: #DADAB0;
  color: #333333;
  font-style: italic;
  cursor: pointer;
}

#contacts #submit:hover, #contacts #submit:focus, #feedback #submit:hover, #feedback #submit:focus {
  background-color: #ECECBE;
}

#contacts label, #feedback label {
	text-align: right;
	width: 20%;
	padding-right: 2%;
  color: #333333;
}

#contacts form br, #feedback form br {
	clear: left;
}

dl.event {
  margin: 0;
  padding: 0;
}

dl.past {
  color: #A2A286;
}

.event dt {
  position: relative;
  left: 0;
  top: 1.1em;
  width: 9.5em;
  font-style: italic;
  font-size: larger;
  text-align: right;
}

.event dd {
  border-left: 1px solid #333333;
  margin: 0 0 0 13em;
  padding: 0 0 .5em .5em;
}

.past dd {
  border-left: 1px solid #A2A286;
}

dd.location {
  font-weight: bold;
  font-variant: small-caps;
}

a img {
    border: none;
}
ul.paging {
  margin:0;
  margin-top: 60px;
  padding: 0;
  list-style: none;
  border-top: 1px solid #ECECBE;
}

ul.paging li {
  margin:0;
  padding: 0;
  list-style-type: none;
  float: left;
  text-align: center;
  width: 25px;
  margin-right: 2px;
}

ul.paging li.current {
  background-color: #ECECBE;
  font-weight: bold;
}

#middleColumn ul.paging li a, #middleColumn ul.paging li a:visited {
  background-image: none;
  display: block;
  color: #CC0000;
  padding: 0;
  height: 100%;
  width: 100%;
}

#cover-container {
    width: 100%;
}

#cover-container2 {
    width: 100%;
    border-top: 1px solid #ECECBE;
    padding-top: 1em;
}

#cont2-left {
    width: 50%;
    padding: 0;
    margin: 0;
    float: left;
}

#cont2-right {
    margin: 0 0 0 52%;
    padding: 0 0 0 1em;
    border-left: 1px solid #ECECBE;
}

#cover-photo {
    width: 206px;
    padding: 0;
    margin: 0;
    float: left;
}

#cover-news {
     margin: 0 0 0 220px;
     padding: 0 0 0 1em;
}

blockquote {
    background-color: #ECECBE;
    border: 3px double #A2A286;
    padding: 0 1em;
    font-style: italic;
}

dl.teaser {
    margin: 0 0 10px 10px;
    padding: 0 20px 0 0;
    width: 70%;
}

dl.teaser:after {                    
    content: ".";
    display: block; 
    height: 0; 
    clear: left; 
    visibility: hidden;
}

dl.teaser dt {
    margin: 0;
    padding: 0;
}

dl.teaser dt a {
    float: left;
    display: block;
    margin: 2px 10px 0 0;
    padding: 2px;
}

dl.teaser dt a img {
    float: left;
}

dl.teaser dd {
    margin: 0 0 2px 0 !important;
    padding: 0;
    line-height: 1.4em;
}

dl.teaser dd.title {
    padding-top: 10px;
}

dl.teaser dd a {
    font-weight: bold;
}