/** ----------------------------------------------------------
 *
 * Contains the main layout of the page and the individual styles. 
 * Acts as the main stylesheet for theme.
 *
 * 		Include your notes or table of contents below....
 *		Include color hex's or values of your grid
 *
 * @author Your Name <email@silverstripe.com>
 * ------------------------------------------------------- */

/* MAIN LAYOUT */
body {
    margin: 0;
    background: #fff;
    min-width: 240px;
    -webkit-text-size-adjust: none;
}
	.ie7 body,
	.ie8 body {
	    min-width: 860px
	}
	.main {
	    background: #fff;
	    padding: 40px 0 60px;
	    min-height: 300px;
	}
	.inner {
	    max-width: 1100px;
	    margin: 0 auto;
	    padding: 0 30px;
	}
	.ie6 .inner {
	    width: 960px
	}
	.content-container {
	    width:100%;
	}


/* PAGE SPECIFIC LAYOUT */
	/* Homepage */
.intro{
  background: url(../images/crappy-pic-of-me.jpg) right 50% no-repeat;
  min-height: 250px;
  margin:200px 0 100px;
}

.contact{
  margin: 0 0 100px 0;
}

.projects-container{
  overflow: hidden;
}
  .projectnav{
    float: left;
    width:195px;
    margin: 0 !important;

  }
    .projectnav li{
      border-bottom: 1px solid #ddd;
      padding:5px;

    }
      .projectnav li a{
        color: #666;
      }

      .projectnav li.current a{
        color: #5786C6
      }


  .projects{
    float: right;
    width:855px;
    padding: 0 0 0 25px;
  }

      .projects .text{
        /*border-bottom: 1px solid #666;*/
        /*margin: 0 0 20px 0;*/
      }
      .projects .project{
        clear:both;
        display: block;
        width: 100%;
        margin: 0 0 50px 0;
      }
      .projects .project iframe{
        display: block;
        margin: 0 0 2px 0;
        border: 1px solid #fff;

      }
      .projects .pieces>a, .projects .pieces .text{
        float: left;
        padding:1px;
        width:283px;
        overflow: hidden;

      }
      .projects .pieces .text{
        background: #fafafa ;
        padding: 10px 10px 0;
        /*border:1px solid #fff;*/
        width:263px;
        margin:1px;
        border-bottom: 5px solid #bbb;
      }



      .projects .pieces .piece{
        display: block;
        vertical-align: top;
        -webkit-transition: all .5s ease-out; 
           -moz-transition: all .5s ease-out; 
             -o-transition: all .5s ease-out; 
                transition: all .5s ease-out; 

      }
      .projects:hover .piece{
        opacity: .2;
      }
      .projects:hover .piece:hover{
        opacity: 1
      }





/* DEVICE & RESPONSIVE LAYOUT */
.header .nav-open-button {
    display: none
}
#media-query-trigger {
    display: none;
    visibility: hidden;
}

@media only screen and (max-width: 960px) { 
  .projectnav {
    display: none;
  }
  .projects{
    float: none;
    width: 100%;
  }


}

/* when changing the breakpoint below, change it ito the same value in the script.js file as well */
@media only screen and (max-width: 640px) { 
  }

}

/* Based on HTML5 boilerplate print styles */
@media print { 
	* {
	    background: transparent !important;
	    color: black !important;
	    box-shadow: none !important;
	    text-shadow: none !important;
	    filter: none !important;
	    -ms-filter: none !important;
	}
	a,
	a:visited {
	    text-decoration: underline
	}
	a[href]:after {
        content: " (" attr(href) ")";
    }
    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

	thead {
	    display: table-header-group
	}
	tr,
	img {
	    page-break-inside: avoid
	}
	img {
	    max-width: 100% !important
	}
	pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }
    @page {
        margin: 0.5cm;
    }
    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }

}









div.jquery-image-zoom {
  line-height: 0;
  font-size: 0;

  z-index: 10;

  border: 5px solid #fff;
  margin: -5px;

  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

  div.jquery-image-zoom a {
    background: url(common_gfx/jquery.imageZoom.png) no-repeat;

    display: block;
    width: 25px;
    height: 25px;

    position: absolute;
    left: -17px;
    top: -17px;
    /* IE-users are prolly used to close-link in right-hand corner */
    *left: auto;
    *right: -17px;

    text-decoration: none;
    text-indent: -100000px;
    outline: 0;

    z-index: 11;
  }

  div.jquery-image-zoom a:hover {
    background-position: left -25px;
  }

  div.jquery-image-zoom img, 
  div.jquery-image-zoom embed, 
  div.jquery-image-zoom object, 
  div.jquery-image-zoom div {
    width: 100%;
    height: 100%;
    margin: 0;
  }