/* Here after are the stylings for Branch Immersion by Kevin Carmody */

body {
  background: url(../images/pattern_115.gif); /* image from http://www.squidfingers.com/patterns/*/
  height:100%;
}

p{
  margin-bottom:1em;
}

em{
  font-style:italic;
}

sup{
  font-size: 0.8em;
  vertical-align:0.4em;
}

a:link{ color:red; text-decoration:none; }
a:visited{ color:red; text-decoration:none; }
a:hover{ color:green; text-decoration:none; }
a:active{ color:red; text-decoration:none; }


/* page content container */
#container{
  background:url(../images/body-bg.jpg) 0 410px;
  max-width:1024px; /* elastic width for modern standards browsers, IE hack in use - see ie-only.css 
        http://www.456bereastreet.com/archive/200504/fixed_or_fluid_width_elastic/*/
  margin:0 auto -50px auto;
  min-height: 100%;
	height: auto !important;
}

/* header secion */
#header{
}

#masthead, #masthead a{
  background: url(../images/header.jpg); 
  height:230px;
  display:block;
  text-indent: -100em; /* remove the text from this view Phark Method 
                    http://www.mezzoblue.com/tests/revised-image-replacement/ */
	overflow: hidden;
}


/* now this navigation rollover without javascript is very clever, 
                adapted from and thanks to Dave Shea
                                 http://www.alistapart.com/articles/sprites/ */
#navigation{
  background:url(../images/nav-sprite.jpg);
  height:180px;
  position: relative; /*for absolute inheretance in list*/
  text-indent: -100em;
	overflow: hidden;
}
#navigation li{
  position:absolute; /* so we can set the link areas to where we want */
}
#navigation li, #navigation a{
  height:75px; /* all links the same hight */
  display:block; /* and not just the space where the text is, but the whole block */
}

/* postioning our links and setting the area width */
.news-l{
  top:10px; left: 60px; width: 110px;
}
.gigs-l{
  top:10px; left: 190px; width: 105px; 
}
.media-l{
  top:10px; left: 320px; width: 110px; 
}
.about-l{
  top:10px; left: 460px; width: 117px; 
}

/* image will just fill the link block, adjust to be the correct area of image */
.news-l a:hover, .non{
  background: transparent url(../images/nav-sprite.jpg) -60px -190px no-repeat;
}
.gigs-l a:hover, .gon{
  background: transparent url(../images/nav-sprite.jpg) -190px -190px no-repeat;
}
.media-l a:hover, .mon{
  background: transparent url(../images/nav-sprite.jpg) -320px -190px no-repeat;
}
.about-l a:hover, .aon{
  background: transparent url(../images/nav-sprite.jpg) -460px -190px no-repeat;
}

.active{
}

/* main content section (left side) */
#content{
  float:left;
  margin:0 0 20px 4%;
  width:62%;
  display:inline;
}
.post{
  text-align:justify;
}
.post img{
  float:right;
  margin:10px 10px;
  padding:5px 5px;
  border:1px solid;
}

.post-title{
}
.post-content{
}
.post-meta{
  padding: 5px 5px;
  text-align:right;
  font-style:italic;
  font-weight:lighter;
}

/* sidebar section (right side) */
#sidebar{
  float:right;
  margin:0 4% 0 0;
  width:25%;
  display:inline;
}
.sidebar-block{
}
.sidebar-block-title{
}
.sidebar-block-list{
}
.sidebar-block-list li{
  margin: 0 20px;
  padding: 2px 0;
  list-style-type:circle;
}

/* footer section */
#footer{
  background:url(../images/box.png) -10px -20px;
  max-width:984px; /* elastic width */
  height:50px;
  margin:0 auto;
  padding:15px 0 5px 40px;
}

/* nav2 - just for handheld */
#nav2{
  display:none;
}

/* additional tricks */
.clear{
  clear:both;
}

.push{
  height:50px;
}