/*
Description: Thumpermonkey have a big strong cavalcade; should wear make-up. http://tiny.cc/iw8j2
Author: Mike Hutchinson
Author URI: http://crikeymiles.com
Version: ∞
*/

/** PAGE STRUCTURE **/


/** body **/
  body
  {
    background: url('images/n7_background.jpg') top center repeat-x #000;
    color: #f9f9de;
    padding: 0;
    margin: 0;
    font-size: 0.8em;
    font-family: sans-serif;
  }

  #body-inner {

  }

  #page
  {
    /*
     * If you want to make the page a fixed width and centered in the viewport,
     * this is the standards-compliant way to do that.
     */
    margin-left: auto;
    margin-right: auto;
    width: 960px;
    padding: 0;
    margin-top: 0;
  }

  #page-inner
  {
  }


/** header **/
  #header
  {
    margin: 0 0 0 0px;
    height: 164px;
  }

  #header-inner
  {
    margin: 0 auto;
  }

  #logo-title
  {
  }

  #logo a
  {
    background: url('images/n7_logo.png') top left no-repeat;
    width: 403px;
    height: 97px;
    text-indent: -9999px;
    display: block;
    float: left;
    margin: 22px 0 0 282px;
  }


/** main (container for everything else) **/
  #main
  {
    position: relative;
    height: 490px;
    padding: 20px 0 10px 0;
  }

  #people #main, #clients #main, #recentwork #main, #KDB #main {
    overflow-y: scroll;
    overflow-x: hidden;
  }

  #main-inner
  {
  }

/** content **/
  #content
  {
    width: 960px;
    height: 490px;
    line-height: 1.8em;
    color: black;
    padding: 0 0 0 0;
  }

  #content-inner
  {
    position: relative;
    margin: 0 0;
    padding: 0;
  }




/** footer **/

  #footer
  {
    clear: both;
    margin: 50px auto 20px auto;
    font-size: 80%;
  }

  #footer-inner
  {
    padding: 0 0 0 0px;
    margin: 0;
  }

#footer #footer-inner p,
#footer #footer-inner li {
    line-height: 1.3em;
}

#footer table {
    height: 80px;
}
#footer table td {
    width: 22%;
    height: 80px;
    vertical-align: top;
}

#footer ul {
    padding: 0 0 0 16px;
}

div#copyright {
    float: right;
    margin: 0 13px 0 0;
    font-size: 70%;
}
div#copyright p {
    margin: 0 0 5px 0;
}



/** OTHER STUFF **/



h1, h2, h3 {
    font-family: sans-serif;
    font-weight: bold; margin: 0 0 10px 0;
    }

h1 { }
h2 { }
h3 { font-size: 1.2em }

p { margin: 0 0 10px 0; }
a {
    color: red;
    text-decoration: underline;
    }
a:hover {
    color: #9dc2f1;
    }

blockquote { }
blockquote p { }

ul, ol { margin: 0 0 10px 0; }

.post { }

.entry { }
.entry a { }
.entry a:hover { }

pre { }
code, tt { }

.align-right { text-align: right;}
.align-centre { text-align: center;}



/** Prevent overflowing content **/
  #header,
  #content,
  #sidebar-right,
  #footer
  {
    overflow: visible;
    word-wrap: break-word; /* A very nice CSS3 property */
  }







/** SPLASH **/

#home_menu {
    position: relative;
    width: 733px;
    height: 450px;
    background: url('images/polaroid-bg.png');
}
.splash-menu-item {
    position: absolute;
    display: block;
    background-position: 0 0;
}

#splash #main-inner,
#splash #content {
    width: 733px;
    margin: 0 auto;
}

#splash h1 {
    text-indent: -9999px;
    display: none;
}

#splash-a {
    background: url('images/people2.png');
    width: 209px;
    height: 245px;
    top: 77px;
    left: 5px;
    z-index: 4;
}
#splash-a.splash-menu-item:hover {
    background-position: 0 245px;
}

#splash-b {
    background: url('images/studio2.png');
    width: 204px;
    height: 241px;
    top: 105px;
    left: 170px;
    z-index: 3;
}
#splash-b.splash-menu-item:hover {
    background-position: 0 241px;
}

#splash-c {
    width: 210px;
    height: 243px;
    top: 83px;
    left: 331px;
    z-index: 2;
    background: url('images/work2.png');
}
#splash-c.splash-menu-item:hover {
    background-position: 0 243px;
}

#splash-d {
    width: 236px;
    height: 265px;
    top: 67px;
    left: 495px;
    z-index: 1;
    background: url('images/equipment2.png');
}
#splash-d.splash-menu-item:hover {
    background-position: 0 265px;
}


/** PEOPLE **/

#people h1 {
    display: none;
}

#people div.bio {
    float: left;
    width: 49%;
    padding: 1%;
}

#people .bio {
    line-height: 1.4em;
}

#people img.headshot {
    float: left;
    width: 140px;
    margin: 0 16px 3px 0;
}



/** STUDIO **/
#blurb img {
    display: block;
    float: left;
    width: 400px;
    margin-right: 50px;
}
.studio-blurb {
    float: left;
    width: 400px;
}


/** Work **/
#recentwork #content {
    width: 960px;
}

.work {
    float: left;
    width: 33%;
    margin-top: 20px;
}
.work h3 {
    font-size: 1em;
    margin: 0;
}
.work img {
    max-width: 300px;
}

/** Equipment List **/
.equipment {
    float: left;
    width: 33.3333%;
    margin-top: 10px;
}
.equipment h2 {
    margin-top: 10px;
}
.equipment p {
    margin-bottom: 0;
}


/** Katherine De Boer **/

#KDB table.grid {
  border-collapse: separate;
  border-spacing: 2em 1em;
}

#KDB .grid td {
	width: 120px;
	align: center;	
}

#KDB .grid p { }

#KDB .grid img {
	background-color: black;
	border: gray 1px solid;
	padding: 7px;
}


/** GEAR **/
.gear_imgs {
    position: absolute;
    width: 986px;
    left: 50%;
    margin-left: -493px;
}

#gear h1 {
    text-align: center;
    color: rgba(0,0,0,0.8);
}

#gear #content-inner p {
    text-align: center;
}

#gear .gear {
    position: absolute;
    background-position: 0 0;
}
.gear1 {
    width: 300px;
    height: 343px;
    top: 20px;
    left: 0;
    z-index: 1;
    background: url('images/gear/gear1.png');
}
#gear .gear1:hover {
    background-position: 0 343px;
}
#gear .gear1:hover a {
    display: block;
}
.gear2 {
    width: 352px;
    height: 382px;
    left: 170px;
    top: 40px;
    z-index: 2;
    background: url('images/gear/gear2.png');
}
#gear .gear2:hover {
    background-position: 0 382px;
}
#gear .gear2:hover a {
    display: block;
}
.gear3 {
    width: 288px;
    height: 334px;
    left: 360px;
    z-index: 3;
    background: url('images/gear/gear3.png');
}
#gear .gear3:hover {
    background-position: 0 334px;
}
#gear .gear3:hover a {
    display: block;
}
.gear4 {
    width: 288px;
    height: 334px;
    left: 520px;
    top: 50px;
    z-index: 2;
    background: url('images/gear/gear4.png');
}
#gear .gear4:hover {
    background-position: 0 334px;
}
#gear .gear4:hover a {
    display: block;
}
.gear5 {
    width: 347px;
    height: 378px;
    left: 660px;
    z-index: 1;
    background: url('images/gear/gear5.png');
}
#gear .gear5:hover {
    background-position: 0 378px;
}
#gear .gear5:hover a {
    display: block;
}

.gear__link {
  display: block;
  width: 100%;
  height: 100%;
}
.gear .fancybox {
    display: none;
    position: absolute;
    width: 30px;
    height: 30px;
}
.gear .fancybox .gear-dot {
  display: block;
  margin: 7px auto 0;
    width: 15px;
    height: 15px;
    background: #DB1D12;
    -webkit-border-radius: 100%;
    border-radius: 100%;
}
.gear1 .img1 {
    top: 205px;
    left: 44px;
}
.gear1 .img2 {
    top: 159px;
    left: 93px;
}
.gear1 .img3 {
    top: 77px;
    left: 46px;
}

.gear2 .img1 {
    top: 210px;
    left: 131px;
}
.gear2 .img2 {
    top: 108px;
    left: 92px;
}
.gear2 .img3 {
    top: 76px;
    left: 162px;
}

.gear3 .img1 {
    top: 143px;
    left: 43px;
}
.gear3 .img2 {
    top: 140px;
    left: 193px;
}

.gear4 .img1 {
    top: 135px;
    left: 145px;
}
.gear4 .img2 {
    top: 219px;
    left: 202px;
}

.gear5 .img1 {
    top: 173px;
    left: 158px;
}
.gear5 .img2 {
    top: 163px;
    left: 263px;
}
.gear5 .img3 {
    top: 116px;
    left: 175px;
}