/*
/ --------------------------------------
/	Mike Marlin
/   Frame Digital
/ --------------------------------------

/* --------------------------------------
/    SCROLLING CSS
/ -------------------------------------- */

html { overflow: hidden; }
body
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 83%;
    padding: 0px; margin: 0px;
    color: #000;
    background: #737373;    
    height: 100%;  
    background-image: url(../images/framework/concrete-dark.jpg);  
}

#content { width: 100%; overflow: hidden; overflow: hidden; height: 1200px; }
#container { width: 9740px; height: 1200px; overflow: hidden; position: relative; background-image: url(../images/framework/concrete-dark.jpg); z-index: 5; }
#site { float:left; width: 8600px; height: 550px; position: absolute; left: 226px; top: 40px; background-image: url(../images/framework/paper_repeat.jpg); background-repeat: repeat-x; background-position: 0 -42px; z-index: 40; }



#site-left
{
    width: 390px;
    height: 1020px;    
    background-image: url(../images/framework/left-marlin.jpg);
    background-position: left top;
    background-repeat: no-repeat; 
	z-index: 20;   
}

#site-right
{
    width: 569px;
    height: 1010px;
	background-image: url(../images/framework/right-candles.jpg);
    background-position: left top;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 9650px;
	z-index: 30;
}

#site-footer
{
    width: 8600px;     
    height: 10px;
    left: 226px; 
    top: 590px;
    background: url(../images/framework/footer-bk.png);
    position: absolute;
    background-repeat: repeat-x; 
	z-index: 10;   
}

#site-footer-background
{
    width: 9638px;     
    height: 378px;
    left: 226px; 
    top: 590px;
    background: url(../images/framework/concrete-texture.jpg) top left;
    position: absolute;
    background-repeat: repeat-x;    
}



.block { position: relative; width: 944px; float: left; height: 619px; padding: 10px; padding-left: 20px; padding-top: 40px; }
.navigation, .previous, .next { cursor: pointer; }
.spacer { height: 619px; float: left; } 


/* GRAFFITI CSS */
#not-dead-yet { position: absolute; top: 625px; left: 445px; }
#white-noise { position: absolute;top: 625px; left: 1285px; }
#hit-the-button { position: absolute;top: 625px; left: 3448px; }
#keeping-a-list { position: absolute; top: 625px; left: 6100px;}
#too-late { position: absolute;top: 625px; left: 8255px; }

/* NEWS CSS */
#news-page { width:752px; }

#news-page #socials
{    
    position: absolute;
    width: 200px;
    top: 210px;
    left: 540px;
    z-index: 2000;
}

#news-page #socials ul { margin: 0px; width: 200px;list-style: none;     }
#news-page #socials li { width: 40px; height: 40px; float: left; background-image: url(../images/social-buttons.gif); padding:0px; margin-right: 10px;   }
#news-page #socials li a { display: block; text-indent: -3000px; width: 40px; height: 40px;  }
#news-page #socials li span { display: none; }
#news-page #socials li:hover span { display: block; height: 58px;}
#news-page #socials li span { background-image: url(../images/rollovers.gif); text-indent: -3000px; }

#news-page_twitter { background-position: 0px 0px; }
li#news_facebook { background-position: -47px 0px; }
#news_vimeo { background-position: -96px 0px; }
#news_flickr { background-position: -144px 0px; }

#news_twitter span { background-position: 0px 0px; width: 105px;position: relative; left: -0px;  }
#news_facebook span { background-position: -103px 0px; width: 124px;position: relative; left: -45px;  }
#news_flickr span{ background-position: -228px 0px; width: 170px; position: relative; left: -125px; }
#news_vimeo span { background-position: -398px 0px; width: 161px; position: relative; left: -75px; }

#news-page #logo 
{ 
    position: absolute;
    left: 37px;
    top: 70px;
}

#news-page #bubble, #news-page #news-list, #register-form, #shop-copy  { z-index: 10; }

#news-page #bubble 
{
    background-image: url(../images/news/bubble.gif);
    width:317px;
    padding-left: 53px;
    padding-right: 10px;
    
    height: 118px;
    padding-top: 20px;
    position: absolute;
    left: 355px;
    top: 68px;

    color: #fff;
    font-size: 15px;    
    line-height: 18px;
    font-weight: 200;    
}

#news-page #bubble a { color: #fff; text-decoration: none; font-size: 15px; }
#news-page #bubble a:hover { text-decoration: underline; }

#news-page #bubble a.facebook { color: #bf1e2e; }

.status { height: 90px; display: none; }

#previous { cursor: pointer; margin-right: 10px; background-image: url(../images/news/next.jpg);  height: 22px; width: 21px;float: right;  margin-top: -5px; background-color: #a09f9d; background-position: bottom; }
div:hover#previous { background-position: top; }

#next {cursor: pointer; margin-right: 10px; background-image: url(../images/news/previous.jpg); height: 22px;width: 21px; float: right; margin-top: -5px; background-color: #a09f9d; background-position: bottom;}
div:hover#next { background-position: top; }

#news-page #news-header
{
    position: absolute;
    left: 29px;
    top: 226px;
}

#news-page #read-all
{
    position: absolute;
    left: 45px;
    top: 365px;
}

#news-page #news-list
{
    width: 276px;
    height: 239px;
    position: absolute;
    top: 232px;
    left: 200px;
}

#news-page #news-list ul,
#news-page #news-list li { list-style: none; float: left; width: 300px; margin:0px; padding:10px 0; }

#news-page #news-list li { min-height: 40px; background-image: url(../images/framework/underline.png); background-repeat: repeat-x; background-position: bottom; }

#news-page #news-list li h2 { font-size: 24px; padding: 0px; margin: 0px; }
#news-page #news-list li h3 { font-size: 16px;padding: 0px; margin: 0px; }

#news-page #news-list li h3 a,
#news-page #news-list li h2 a { color: #bf1e2e; text-decoration: none; }

#news-page #news-list li p { font-weight: bold; padding: 0px; margin: 0px;}


#news-page #news-list a.read-more { color: #bf1e2e; font-size: 12px; text-decoration: none; font-weight: bold; margin-top: 5px; display: block; }

#news-page #coffee-stain
{
    top: 210px;
    left: 485px;
    position: absolute;
}

#wall-texture
{
    position: absolute;
    top: 144px; left: 500px;    
}



/* MUSIC CSS */
#music-header
{
    position: absolute;
    top: 60px;
    left: 40px;
}

#music-page #buy 
{
    position: absolute;
    left: 211px;
    top: 200px;
}

#marlin-polaroid
{
    position: absolute;
    left: 13px;
    top: 200px;
}

#desk-kids
{
    position: absolute;
    top: 350px;
    left: 100px;
}

#asteroid
{
    position: absolute;
    left: 115px;
    top: 219px;
}

#music-page #noteable-books
{
    position: absolute;
    left: 370px;
    top: 435px;
}

/* #music-page #music-list */
#music-page #music-copy
{
    width: 550px;    
    position: absolute;
    top: 75px;
    left: 400px;    
}


/* #music-page #music-copy { top: 250px; } */

#music-page #music-list h2
{
    background-image: url(../images/framework/underline.gif);
    background-repeat: repeat-x;
    background-position: bottom left;
    padding-bottom: 3px;
}

#music-page #music-list h3 { padding: 0px; margin: 0px; font-size: 15px; cursor: pointer; color: #000; }

#music-page #music-list ul { list-style: none; padding: 0px; margin: 0px; width: 291px; float: left;}

#music-page #music-list ul li { width: 180px; float: left; padding: 0 0 0 20px; }
#music-page #music-list ul li.time { width: 86px; text-align: right; font-weight: bold; color: #000; padding: 2px;}
.click-to-see { margin-top: 10px; }
#music-page #dict_flash
{
    position: absolute;
    top: 40px;
    left: 365px;
}

#music-page #trapdoor
{
    
    width: 364px;
    height: 169px;
    position: absolute;
    left: 600px;
    top: 380px;
}
#music-page #trapdoor a
{ 
    width: 364px;
    height: 169px; display: block;
    background-image: url(../images/music/trapdoor.gif);
    background-position: bottom; 
}

#music-page #trapdoor a:hover
{
    background-position: top;
}

/* GIGS CSS */
#gigs-page #gigs-header
{
    position: absolute;
    top: 131px;
    left: 15px;
}

#gigs-page #ticket
{
    position: absolute;
    left: 668px;
    top: 386px;

}

#gigs-page #cogs
{
    position: absolute;
    top: 252px;
    left: -74px;
}

#gigs-page #ship
{
    position: absolute;
    top: 341px;
    left: 125px;
}

#gigs-page #wagon
{
    position: absolute;
    top: 410px;
    left: 375px;
}

.no-gigs { margin-top: 150px; margin-left: 50px; } 

#gigs-page #sandwich-direction
{
    position: absolute;
    top: 458px;
    left: 518px;
}


#gigs-page #gigs-list
{
    position: absolute;
    left: 355px; top: 50px;
    height: 305px; width: 715px;
}

#gigs-list #all-gigs
{
    position: relative; left : 180px; top: 20px;
}

#gigs-page #gigs-list ul { padding: 0px; margin: 0px; list-style: none; width: 304px; float: left;  position: relative;}
#gigs-page #gigs-list ul li { margin-bottom: 3px; float: left; }

#gigs-page #gigs-list .gig-left { width: 73px; float: left; background-image: url(../images/gigs/date-bk.gif); background-repeat: no-repeat; height: 56px; }
#gigs-page #gigs-list .gig-right { width: 220px; min-height: 55px; padding: 0 0 5px 0; float: left;background-image: url(../images/framework/underline.png); background-repeat: repeat-x; background-position: bottom; }

#gigs-page #gigs-list ul.col-2 { padding-left: 5px; }

#gigs-page #gigs-list .last { background: none; }

#gigs-page #gigs-list .gig-right h2  { font-size: 15px; }

#gigs-page #gigs-list .gig-right p,
#gigs-page #gigs-list .gig-right h2 { margin: 0px; }


#gigs-page #gigs-list .gig-right h2 a { color: #bf1e2e; text-decoration: none; }
#gigs-page #gigs-list .gig-right p { color: #000000; font-size:13px; font-weight: bold; }

#gigs-page #gigs-list .gig-left h3.date { font-size: 19px; color: #e6e1db; margin: 10px 0 0 9px; }
#gigs-page #gigs-list .gig-left p { font-weight: bold; width: 54px; text-align: center; }

/* VIDEOs CSS */
#videos-page #video-list
{
    position: absolute;
    left: 250px;
    top: 50px;
    width: 700px;
    height: 330px;
    z-index: 1000;
}

#videos-page #video-list ul { float: left; list-style: none; padding:0px;margin:0px; padding-top: 10px; }

#videos-page #video-list ul li { 
    float: left; 
    width: 168px; 
    padding: 7px 0px 10px 7px; 
    height: 130px; 
    background-image: url(../images/videos/frame.gif); 
    background-repeat: no-repeat; 
}   

#videos-page #video-list ul li h3 { margin-bottom: 0px; margin-top: 5px; }
#videos-page #video-list ul li p { color: #000; font-weight: bold; }

#videos-page #video-header
{
    position: absolute;
    left: 50px;
    top: 50px;    
}

#videos-page #videos_vimeo
{
    position: absolute;
    left: 462px;
    top: 474px;
}

#videos-page #videos_vimeo span
{
   display: none;
}

#videos-page #videos_vimeo:hover span
{
   display: block; height: 58px;
   background-position: -398px 0px; width: 161px; position: relative;   
   left: -55px; top: 10px;
   background-image: url(../images/rollovers.gif);
}

#videos-page #doorway
{
    position: absolute;
    left: 785px;
    width: 322px;
    height: 545px;
	top: 5px;
}

#videos-page #lightbulb
{
    position: absolute;
    top: 0px;
    left: 66px;
}

#video-overlay
{
    position: absolute; top: 0px; left: 0px;
    height: 100px; width: 100px;
    z-index: 3000;
    background-color: #010101;
    width: 100%; 
    opacity: .85;    
    display: none;
    background:url(../../../common/styles/images/overlay.png) 0 0 repeat;
}

#video-holder
{
    position: absolute; top: 0px; left: 0px;
    z-index: 4000;
    width: 725px; height: 480px;    
    background-image: url(../images/videos/large-frame.png);
    background-repeat: no-repeat;
    margin: 0 auto;
    display: none;    
}

#video-body { background:black; padding: 0 25px 0 25px; width: 645px; height: 443px; position: relative; top: 15px; left: 15px;}

#closeVideo { float: right; clear: both; cursor: pointer; margin: 10px 0 0 0; padding-bottom: 15px; }

#videos-page #youtube { position: absolute; top: 75px; left: 250px; width: 500px;  }

/* PHOTOS CSS */
#photos-page #photos-header
{
    position: absolute;
    top: 58px;
    left: 30px;
}

#photos-page #photos_flickr
{
    position: absolute;
    top: 94px;
    left: 330px;
    width: 40px;
}

#photos-page #photos_flickr span
{
   display: none;
}

#photos-page #photos_flickr:hover span
{
   display: block; height: 50px;
   background-position: -228px 0px; width: 170px; position: relative;
   left: -135px; top: 3px;
   background-image: url(../images/rollovers.gif);
}


#photos-page #gallery
{
    position: absolute;
    height: 467px; width: 469px;
    top: 48px;
    left: 425px;
    background-image: url(../images/photos/large-frame.png);
    background-repeat: no-repeat;
}

#gallery #viewing { width: 450px; height: 450px; margin: 7px 0 0 10px; overflow: hidden; background: black; padding-top: 3px; }
#gallery #viewing ul { margin: 0px; padding: 0px; list-style: none; float: left; }
#gallery #viewing ul li { margin: 0px; padding: 0px; list-style: none; float: left; margin: 1px 3px; }

#photos-page #photosets
{
    position: absolute;
    top: 160px;
    left: 60px;
    width: 320px; height: 157px;    
}

#photos-page #photosets li,
#photos-page #photosets ul {
    margin: 0px; padding:0px;
    width: 320px; list-style: none; cursor: pointer;
    float: left;
}

#photos-page #photosets li { color: #000000;  margin-bottom: 15px; }
#photos-page #photosets li.selected { background-image: url(../images/photos/set-arrow.gif); background-repeat: no-repeat; background-position: left center; font-weight: bold; padding-left: 10px; width: 129px; }

#photos-page #photosets h2 {
    background-image:url(../images/framework/underline.gif);
    background-position: left bottom;
    background-repeat:repeat-x;
    padding-bottom: 3px;
}

#photos-page #photosets li h3, 
#photos-page #photosets li p { float: left; width: 210px; margin: 0px;} 
#photos-page #photosets li h3 { margin-top: 10px; }

#photos-page #photosets li span 
{ 
    float: left; 
    width: 65px; 
    height: 65px; 
    background-image: url(../images/photos/thumbnail-frame.png); 
    display : block; 
    padding: 7px; 
    margin-right: 20px;
}

#photos-page #photosets li span img { width: 65px; height: 65px; }

#photos-overlay
{
    position: absolute; top: 0px; left: 0px;
    height: 100px; width: 100px;
    z-index: 3000;
    background-color: #010101;
    width: 100%; 
    opacity: .85;    
    display: none;
    background:url(../../../common/styles/images/overlay.png) 0 0 repeat;
}

#photos-holder
{
    position: absolute; top: 0px; left: 0px;
    z-index: 4000;
    width: 720px; height: 593px;    
    background-image: url(../images/photos/photo-popup.png);
    background-repeat: no-repeat;
    margin: 0 auto;
    display: none;        
}

#photos-body { background:black; padding: 0 25px 0 25px; width: 645px; height: 560px; position: absolute; top: 15px; left: 15px; text-align: center; }

#the-photo { width: 500px; height: 500px; position: relative; margin: 50px auto; }

#photos-body #next-photo,
#photos-body #previous-photo { float: left; margin: 10px 0 0 0; cursor: pointer; }

#closePhotos { float: right; cursor: pointer; margin: 10px 0 0 0; padding-bottom: 15px; }

/* REGISTER CSS */
#register-page #coffee-stains
{
    position: absolute;
    left: -175px;
    top: 128px;
}

#register-page #register-header
{
    position: absolute;
    left: 36px;
    top: 40px;
}

#register-page #marlin-frame
{
    position: absolute;
    left: -50px;
    top: 200px;
}

#register-page #register-bubble-one
{
    height: 220px; width: 210px;
    position: absolute;
    left: 205px;
    top: 150px;
    padding: 10px 10px 20px 60px;
    background-image: url(../images/register/register-bubble-one.gif);
    background-repeat: no-repeat;
}

#register-page #register-bubble-one p { font-size: 14px; font-weight: bold; color: #fff; line-height: 22px; }


#register-page #followmike { position: absolute;
    left: 278px;
    top: 405px; }
#register-page #bemikesfriend { position: absolute;
    left: 279px;
    top: 447px;}
#register-page #emailmike { position: absolute;
    left: 280px;
    top: 492px;}

/*
#register #register-bubble-two
{
    position: absolute;
    left: 253px;
    top: 368px;
}
*/

#register-page #register-form
{
    width: 400px;height: 350px;
    position: absolute;
    left: 520px;
    top: 140px;
}

#register-page #register-form .label { width: 135px; height: 35px; float: left; padding-top: 5px; }
#register-page #register-form .field { width: 245px; height: 45px; float: left; }

.field input 
{ 
    border: 0px; background-color: transparent; width: 218px; height: 25px;
    padding: 1px 0 0 10px;
    font-size: 12px;
}

.field span { display: block; background-repeat: no-repeat;height: 45px; }
.field #span-firstname { background-image: url(../images/register/field-firstname.png);  }
.field #span-surname { background-image: url(../images/register/field-surname.png); }
.field #span-email {  background-image: url(../images/register/field-surname.png); }
.field #span-promo {  background-image: url(../images/register/field-promo.png); }

.field #btn-register { float: right; outline: none; cursor: pointer; background-image: url(../images/register/btn-register.png); background-repeat: no-repeat; text-indent: -3000px; height: 53px; width: 116px; }
.field #btn-register:hover { background-position: 0 -53px; }

.field #lbl-info { cursor: pointer; border: 0px; background-image: url(../images/register/checkbox.png); height: 15px; width: 20px; display: block; float: left; width: 20px; }
.field .lbl-selected { background-position: bottom; }

.field #info { display: none; }

/* MACHINE CSS */

#machine-page #machine-header
{
    position: absolute;
    left: 132px;
    top: 80px;
}

#machine-page #the-machine
{
    position: absolute;
    left: 107px;
    top: 136px;
}

#machine-page #coffee-stains
{
    position: absolute;
    left: 700px;
    top: 131px;
}

#machine-page #nailed-it
{
    position: absolute;
    left: 795px;
    top: 420px;
}

/* CSS ABOUT */
#about-page #about-header
{
    position: absolute;
    top: 410px;
    left: 35px;
}

#about-page #fuck
{
    position: absolute;
    top: 0px;
    left: -20px;
}

#about-page #about-copy
{
    width: 565px; height: 200px;
    position: absolute;
    left: 435px;
    top: 279px;
 
    font-size: 11.5px;
    line-height: 17px;
    -moz-column-count: 3;
	-moz-column-gap: 20px;    
	-webkit-column-count: 3;
	-webkit-column-gap: 20px;
	column-count: 3;
	column-gap: 20px;
   
}

#about-page #reference {   
    font-size: 11.5px;
    line-height: 17px;  
    width: 565px; height: 200px;
    position: absolute;
    left: 435px;    
    top: 480px; border-top: solid 1px #cdcdcd; padding-top: 10px; }

#about-page #reference div.editarea { width: 565px; }

#about-page #about-copy div.editarea
{
    -moz-column-count: 3;
	-moz-column-gap: 20px;
	-webkit-column-count: 3;
	-webkit-column-gap: 20px;
	column-count: 3;
	column-gap: 20px;

    width: 565px;
}

/* CSS SHOP */
#shop-header
{
    position: absolute;
    top: 68px;
    left: 103px;
}

#tea { 
    position: absolute;
    top: 165px;
    left: 440px;
}

#shop-copy
{
    position: absolute;
    left: 103px;
    top: 220px;
    width: 320px;
    height: 300px;
}

#shop-page p { font-size: 12px; line-height: 17px; }

/* LINKS */
#links-header
{
    position: absolute;
    top: 390px;
    left: 50px;
}

#tall-hall 
{
    position: absolute;
    top: 1px;
    left: 655px;
}

.links-copy { width: 600px; left: 50px; position: absolute; }

#links-1-col,
#links-2-col
{
    border-collapse: collapse;
    width: 600px;
    margin-top: 40px;    
}

#links-1-col tr,
#links-2-col tr { height: 30px; }

#links-1-col tr td { width: 600px; font-size: 13px; padding-bottom: 20px; }
#links-2-col tr td { width: 300px; font-size: 13px; padding-bottom: 20px; }

#links-1-col tr td a,
#links-2-col tr td a { font-size: 18px; font-weight: bold; text-decoration: none; color:#bf1e2e; }

#links-1-col tr td a:hover,
#links-2-col tr td a:hover { text-decoration: underline; }

/* OTHERS */
#dog-tags
{
    position: absolute;
    top: -50px;
    left: 9700px;    
}

#marlin-on-ground
{
    position: absolute;
    top: 242px;
    left: -380px;   
}

#man-on-ground
{
    position: absolute;
    top: 590px;
    left: 6400px;    
}

#bent-nail
{
    position: absolute;
    top: 70px;
    left: 6540px;     
}