/**************************************************************
   Vertically centred band
 **************************************************************/

#horizon {
  text-align: center; 
  position: absolute;
  top: 50%;
  left: 0px;	
  width: 100%;
  height: 1px;
  
  overflow: visible;
  visibility: visible;
  display: block;
}

#horizon #band {	
  position: absolute;
  left: 0;
  top: -91px;
  width: 100%;
  height: 183px;
  
  visibility: visible;  
  background: url(../img/bg/band.jpg) repeat-x top left;
}



/**************************************************************
   Loader and progress bar
 **************************************************************/

#loader {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 500;
  background-color: #FFF;  
}

#loader #bar {
  position: absolute;
  bottom: 0 !important;
  bottom: -5px;
  left: 0;
  height: 5px;
  width: 0;
  background-color: #A40101;  
}


/**************************************************************
   Javascript disabled message
 **************************************************************/
 
#noscript {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;  
  z-index: 501;
  
  padding: 5px 0;
  text-indent: 5px;
  background: #FFFBBC;
  border-bottom: 1px solid #FFF66A;
}

#noscript a {
  border: 0;
}



/**************************************************************
   Content
 **************************************************************/
 
 #content {
   position: relative;       
   width: 960px;
   height: 183px;
   margin: 0 auto;
 }
 
 /* The 3 main menu links */
 #content #logo,
 #content #about,
 #content #work,
 #content #contact {
   position: relative;
   z-index: 2;
   
   float: right;
   width: 151px;
   height: 183px;
   margin-left: 5px;

   /* Prevents dotted outline from link clicks */   
   outline: none;
   -moz-outline-style: none;   
   
   border: 0;
 }
 
  #content #aboutImg,
  #content #workImg,
  #content #contactImg {
    opacity: 0;
    visibility: hidden;
 }
 
 #content #logo {
   float: left;
   margin: 0;
   padding: 0;
   text-indent: -1000em;
   background: url(../img/bg/logo.jpg) no-repeat top left;
 }
 
  #content #about {
    margin-left: 0;
    background: url(../img/bg/about.jpg) no-repeat top left;
 }
 
  #content #work {
    background: url(../img/bg/work.jpg) no-repeat top left;
 }
 
  #content #contact {
    background: url(../img/bg/contact.jpg) no-repeat top left;
 }
 
 
 /* Sliding open/close content window */
 #content #slider {  
   position: absolute;
   top: 0;
   left: 151px;
   
   width: 346px;
   height: 124px;
   
   text-align: left;
   background-color: #810024;
   overflow: hidden;
 }

 
 /**************************************************************
    Content Frames
 **************************************************************/

 #aboutFrame,
 #workFrame,
 #contactFrame {
   position: absolute;   
   top: 0;
   left: 0;
   z-index: 1;   
   height: 304px;
   
   clip: rect(auto 346px auto auto);
   overflow: hidden;  
   visibility: hidden;
 }
 
 /* Each frame must be wide enough to hold all sub frames side-by-side 
   (multiple of # of frames * width of ".frame" class) 
 #aboutFrame {
   width: 346px;   
 }
 
 #workFrame {
   width: 2768px; 
 }
 
 #contactFrame {
   width: 346px; 
 } */
 
 #aboutScroll,
 #workScroll,
 #contactScroll {
   position: absolute;
   top: 40px;
   left: 0;   
 }

 .frame {
   float: left;
   width: 346px;
   background-color: #810024;
 }
 
 
 
 /**************************************************************
    Paging on frames
 **************************************************************/
 
 .paging {
   display: none;
   position: absolute;
   top: 0;
   right: 0;
   
   font: bold 14px georgia, serif;
   font-variant: small-caps;
   color: #C0BEBE;
 }
 
 .paging .prev,
 .paging .next {
   float: left;  
   height: 15px;
   
   border: 0;
   
   /* Prevents dotted outline from link clicks */   
   outline: none;
   -moz-outline-style: none;  
   
   background-color: #D10707;
 }
 
 .paging a:hover.prev,
 .paging a:hover.next {
   background-color: #000;
   border: 0;
 }
 
 .paging a.disabled,
 .paging a:hover.disabled {
   cursor: default;
   background-color: #C0BEBE;
 }
 
 .paging span {
   position: relative;
   top: -3px;
   float: left;
   width: 3.5em;
   text-align: center;
 }
 
 .paging .pages {
   background-color: #810024;
 }
 
/**************************************************************
   Thumbnails
 **************************************************************/
 
.thumbs {
  float: left;
}

.thumbs a {
  border: 0;
}

.thumbs a img {
  margin: 3px 4px 3px 3px;
  border: 1px solid #810024;
}

.thumbs a:hover img {
  border: 1px solid #630228;
}

.thumbs a.last img {
  margin-right: 0;
}

.gray {
  padding: 0 4px;
  color: #BBB;
}


#yps {
  position: absolute;
  top: 185px;
  right: 1px;
  z-index: 2;
  
  width: 292px;
  height: 169px;
  
  color: #B8D854;
  background: url(../img/bg/yorkplacestudios.png) no-repeat top left;
}