https://vimeo.com/album/3953264/video/165995133/* 
eek! all this needs to be updated sooo badly!
*/
/*-----------------------------------------------
  =colour guide
-------------------------------------------------
white grey: #f7f8f8;
med grey: #c8c9c9;
dk grey: #525252;
near black: #242424;

yellow: #fdc927;

-----------------------------------------------*/
html, body, div, span,
applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dd, dl, dt, li, ol, ul,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: inherit;
  font-style: inherit;
  text-align: left; }

div, span {
  margin: 0;
  padding: 0; }

a img, :link img, :visited img {
  border: 0; }

strong {
  font-weight: bold; }

em {
  font-style: italic; }

/*-----------------------------------------------
  =top level things
-----------------------------------------------*/
body {
  margin: 0;
  padding: 0;
  color: #242424;
  background-color: #FBFBFB;
  -webkit-text-size-adjust: none;
  -ms-text-size-adjust: none; }

body, h1, h2, h3, h4, h5, h6, dt, h1, h2, .pullquote, blockquote, cite {
  font-family: "rooney-sans", Verdana, Helvetica, sans-serif;
  font-style: normal;
  font-weight: 400; }

body {
  font-size: 135%;
  line-height: 1.5; }

@media only screen and (max-width: 45em) {
  body {
    font-size: 110%; } }
::selection {
  background: #AD0271;
  color: #fff; }

::-moz-selection {
  background: #AD0271;
  color: #fff; }


@media only screen and (min-width: 50em) {
  .cols {
    -webkit-columns: auto 2;
     -moz-columns: auto 2;
          columns: auto 2;

  -webkit-column-gap: 40px;
     -moz-column-gap: 40px;
          column-gap: 40px;
  }

  .cols p {
    margin: 0 0 1em 0;
    display: inline-block;
    width:100%;

  }
.cols p:first-child {
  margin-top:0 !important;
}

}

/*-----------------------------------------------
  =misc 
-----------------------------------------------*/
.hide {
  display: none; }

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }

img {
  border: 0;
  max-width: 100%;
  height: auto; }

img.small {
  border: 0;
  max-width: 50%;
  height: auto; 
}

img.fig {
  display: block;
  margin:auto;
}

.clear {
  clear: both; }

.float-left {
  float: left;
  margin: 0 5% 0 0; }

.float-right {
  float: right;
  margin: 0 0 0 5%;
  /*padding: 5px 0 5px 5px;*/ }

@media only screen and (max-width: 40em) {
  .float-left, .float-right {
    float: none;
    display: block;
    margin-bottom: 1em; } 

  img.small {
  border: 0;
  max-width: 100%;
  height: auto; 
  }

  }
/* Contain floats: h5bp.com/q */
.group:before, .group:after {
  content: "";
  display: table; }

.group:after {
  clear: both; }

.group {
  *zoom: 1; }

/*  -----------------------------------------------
 =header
 -----------------------------------------------*/
.title {
  text-indent: -9999em;
  margin: -50px 0 0 -100px;
  padding: 0;
  width: 56px;
  height: 66px;
  background: url(../tip6/images/crest_colour.png) top center;
  position: relative; }

.title a {
  display: block; }

#nav_links {
  margin: 21px 0 0 0;
  font-family: "rooney-sans",sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 1.2em;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.75); }

#nav_links li {
  float: left;
  list-style: none;
  padding: 0 2em;
  margin: 0; }

#nav_links li {
  padding: 0;
  margin: 0 8% 0 0; }

#nav_links li, #nav_links li a {
  color: #525252; }

#nav_links li a:link {
  color: #525252; }

#nav_links li a:visited {
  color: #525252; }

#nav_links li a:hover {
  text-decoration: none;
  color: #AD0271; }

.header {
  margin: 0 auto 0.5em auto;
  padding: 0;
  width: 70%; }

/*! responsive-nav.js 1.0.39 by @viljamis */
.js .nav-collapse {
  clip: rect(0 0 0 0);
  max-height: 0;
  position: absolute;
  display: block;
  overflow: hidden;
  zoom: 1; }

.nav-collapse.opened {
  max-height: 9999px; }

.nav-collapse.opened ul {
  clear: both; }

.nav-collapse.opened ul li {
  width: 100%;
  display: block; }

.nav-toggle, #menu-toggle {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  display: block;
  width: 80px;
  text-align: center;
  border: none;
  color: whitesmoke;
  background-color: #AD0271;
  font-family: "rooney-sans",sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 1em;
  padding: 10px;
  border-radius: 10px; }
  .nav-toggle:hover, #menu-toggle:hover {
    background-color: #764282; }

@media screen and (min-width: 54em) {
  .js .nav-collapse {
    position: relative; }

  .js .nav-collapse.closed {
    max-height: none; }

  .nav-toggle, #menu-toggle {
    display: none; } }
@media only screen and (max-width: 54em) {
  #nav_links {
    margin-top: 3px; }

  .header {
    font-size: 1.2em;
    padding-top: 0em;
    width: 95%; }

  .title, .nav-collapse, .nav-toggle, #menu-toggle {
    float: none;
    margin: .5em auto; }

  .title {
    margin-left: 0;
    float: left; }

  #menu-toggle {
    float: right;
    margin-top: 1.5em; }

  #nav_links li {
    float: none;
    display: block;
    margin: .25em 0;
    text-align: center; } }
.lines-button {
  display: inline-block;
  padding: 1.5rem 0.75rem;
  transition: .15s;
  cursor: pointer;
  user-select: none;
  border-radius: 0.4285714286rem; }
  .lines-button:hover {
    opacity: 1; }
  .lines-button:active {
    transition: 0;
    background: rgba(0, 0, 0, 0.1); }

.lines {
  display: inline-block;
  width: 3rem;
  height: 0.4285714286rem;
  background: #525252;
  border-radius: 0.2142857143rem;
  transition: 0.25s;
  position: relative;
  /*create the upper and lower lines as pseudo-elements of the middle line*/ }
  .lines:before, .lines:after {
    display: inline-block;
    width: 3rem;
    height: 0.4285714286rem;
    background: #525252;
    border-radius: 0.2142857143rem;
    transition: 0.25s;
    position: absolute;
    left: 0;
    content: '';
    transform-origin: 0.2142857143rem center; }
  .lines:before {
    top: 0.75rem; }
  .lines:after {
    top: -0.75rem; }
  .lines:hover, .lines:active {
    background: #c10280; }
    .lines:hover:before, .lines:hover:after, .lines:active:before, .lines:active:after {
      background: #c10280; }

.lines-button.active .lines:before, .lines-button.active .lines:after {
  transform: none;
  width: 3rem;
  top: 0; }

/*  -----------------------------------------------
 =container
 ----------------------------------------------- */
#container {
  padding: 0;
  margin: 0 0 4em 0;
  text-align: left;
  width: 100%; }

/*  --------------------------------------------
=content main 
-----------------------------------------------*/
.content_main, .footer_inner {
  margin: 4em auto 2em auto;
  padding: 0;
  width: 70%;
  max-width: 1000px; }

@media only screen and (max-width: 45em) {
  .content_main, .footer_inner, .header {
    width: 90%; }

  .content_main {
    margin-top: 2em; } }
@media only screen and (min-width: 93em) {
  .content_main, .footer_inner, .header {
    width: 50%; } }
.content-xl {
  margin: 4em auto 2em auto;
  padding: 0;
  width: 75%;
  max-width: 1200px; }

.content-primary {
  float: left;
  width: 65%;
  margin-bottom: 3em; }

.content-secondary {
  float: right;
  width: 26%; }

@media only screen and (max-width: 75em) {
  .content-primary, .content-secondary {
    float: none;
    width: 90%; }

  .content-primary, .content-secondary {
    margin-top: 2em; }

  .cats-list li {
    display: inline-block;
    padding: 0;
    margin: 0; }

  .cats-list li::after {
    content: ","; } }
.post-listing {
  margin-bottom: 2.2em; }
  .post-listing h3 a:link {
    color: #AD0271; }

.content-secondary article {
  margin: .6em 0 2em 0; }

.cats-list {
  list-style: none; }

/* --------------------------------------------
=home page
-----------------------------------------------*/
.feature {
  font-size: 1.4em;
  padding-bottom: 0.375em; }

.feature p {
  margin-bottom: 0.5em; }

@media only screen and (min-width: 70em) {
  .feature {
    font-size: 1.6em; } }
p.lead-in {
  font-size: 1.4em;
  margin-bottom: 1.5em; }

.overview {
  width: 100%;
  font-size: .9em;
  margin-top: 1em;
  padding-bottom: 1em;
  overflow: hidden; }

.overview .recent, .overview .events {
  width: 45%;
  float: left; }

.overview .recent {
  margin-right: 10%; }

@media only screen and (max-width: 30em) {
  .overview .recent, .overview .events {
    width: 90%;
    float: none; } }
/* --------------------------------------------
=blog space
-----------------------------------------------*/
.content_main #wrap {
  overflow: hidden;
  padding: 0 0 80px 0; }

#blog .slides {
  width: 70%;
  max-width: 600px; }

.content_main div.entry {
  padding-bottom: 20px; }

#blog_nav ul {
  list-style: none;
  margin: 0; }

.related_post {
  list-style: none;
  color: #525252;
  padding: 0 0 1em 0; }

.related_post_title {
  font-size: 1.125em;
  padding: 2em 0 0 0;
  color: #525252;
  margin-bottom: 0;
  font-style: italic;
  font-weight: normal; }

.navigation {
  margin: 2em 0;
  overflow: hidden; }

.navigation .prev {
  float: left; }

.navigation .next {
  float: right; }

img.side-left {
  width: 30%;
  max-width: 350px;
  float: left;
  margin: .2em 20px .2em 0; }

/*--------------------------------------------
=code formatting
-----------------------------------------------*/
.ch_code_container {
  background-color: #f0f0f0;
  border: 1px solid #C3CED9;
  padding: 0px 0px 0 0;
  width: 100%;
  text-align: left;
  font-size: 1.00em;
  overflow: auto; }

.ch_code_container .head {
  color: #808080;
  font-weight: bold;
  background-color: #f0f0ff;
  border-bottom: 1px solid #d0d0d0;
  padding: 2px; }

/*--------------------------------------------
=work display space
-----------------------------------------------*/
.content_main #work {
  padding: 80px 0 0 10px;
  width: 300px;
  /*310*/
  float: right;
  display: none; }

.content_main #work ul {
  margin: 0 0 0 8px;
  position: relative; }

.content_main #work ul li {
  list-style: none;
  padding-bottom: 30px;
  width: 271px;
  height: 100px;
  float: left; }

.content_main #work ul li a {
  margin: 9px 0 0 9px;
  width: 255px;
  height: 62px;
  display: block; }

.content_main #work ul + div {
  padding-top: 50px; }

/*  -----------------------------------------------
 =text stylin'
 -----------------------------------------------*/
.caption {
  color: #7F8080;
  margin-top: .2em;
  padding: 0;
  font-style: italic;
  display: block;
  font-size: 0.8em; }

/*those fun extra divs for stopping WP from wrapping my images in a p */
div > a, div > img {
  margin-top: 0.5em; }

em {
  font-style: oblique; }

h1, h2, h3, h4, h5, h6 {
  color: #525252;
  font-style: italic; }

h1 {
  font-size: 2.2em;
  line-height: 1.2;
  margin: 1.3em 0 0;
  font-family: "rooney-web", Georgia, sans-serif;
  font-weight: 700;
  font-style: italic;
  padding: 0.3em 0 0.65em; }

h2 {
  color: #525252;
  font-size: 2em;
  line-height: 1.1;
  font-family: "rooney-web", Georgia, sans-serif;
  font-weight: 700;
  font-style: normal;
  margin: 1em 0 .5em 0; }

h2.blog {
  margin-top: 0; }

@media only screen and (max-width: 45em) {
  h2 {
    font-size: 1.8em; } }
#footer h2, #footer h3 {
  color: whitesmoke; }

h3 {
  margin: 2em 0 1em 0;
  font-size: 1.4em;
  line-height: 1.2;
  font-family: "rooney-web", Georgia, sans-serif;
  font-weight: 700;
  font-style: normal; }

h5 {
  color: #9B9292; }

#container h2 a:visited, #container h2 a:active, #container h2 a:link {
  color: #525252;
  text-decoration: none; }

#container h2 a:hover {
  color: #764282;
  text-decoration: none; }

h1 + img, h2 + img {
  margin-top: 0.75em; }

h3#respond {
  font-size: 1.6em; }

h4 {
  font-weight: bold;
  font-size: 1em;
  margin-top: 0.5em; }

small {
  display: block;
  font-size: 0.7em;
  margin: .5em 0 -0.2em;
  line-height: 1.75; }

p, ul, ol, form {
  margin: 0.5em 0 1.5em; }

ul {
  list-style-position: outside;
  list-style-type: disc;
  line-height: 1.5; }

li {
  margin-bottom: 0.5em; }

ul, ol {
  /*margin-left: 20px;*/
  padding-bottom: 15px; }

ul.archives li {
  list-style: none;
  padding: 0.5em 0; }

ul.linklist {
  width: 200px; }

ul.linklist li {
  list-style: none;
  /*padding: 0.25em 0;*/
  width: 200px; }

footer.post_info {
  margin-top:4em;
}

.post_info p {
  padding: 0;
  margin: 0;
  font-style: italic;
  font-size: 0.9em; }

pre, code {
  font-family: Courier,monospace;
  font-size: 14px;
  margin: 20px 0 20px 10px; }

pre {
  padding: 0 10px;
  overflow: auto; }

blockquote {
  font-style: italic;
  color: #000;
  font-size: 1.2em;
  margin-left: 2em; }


  .hilite {
    background: #f5eef9;
    width: 90%;
    margin: 0.5em auto;
    padding: .75em 5%;
    overflow: hidden;
}

/* -----------------------------------------------
 =footer
-----------------------------------------------*/
#footer {
  width: 100%;
  overflow: hidden;
  min-height: 100px;
  background-color: #131313;
  color: whitesmoke;
  padding-bottom: 8em; }

#footer .elsewhere {
  background-color: #D2CDCD;
  color: #242424; }

#footer .newsletter {
  background-color: #2A2A2A;
  min-height: 40px; }
  #footer .newsletter p {
    text-align: center; }

#footer .newsletter .footer_inner, #footer .elsewhere .footer_inner {
  margin: 0 auto; }

#footer .newsletter p {
  margin: 0 auto 1.375em auto;
  padding: 1.375em 0; }

.short_bio img {
  float: left;
  display: inline;
  margin: 0.3em 2% 0 0; }

#footer .recent {
  margin-top: 2em;
  width: 60%;
  float: right; }

#footer .link_list {
  margin: 2em 2% 0 0;
  width: 35%;
  float: left;
  list-style: none; }

.link_list h3 {
  margin-top: -.4em; }

.book {
  margin-bottom: 2em; }

@media only screen and (max-width: 45em) {
  #footer .link_list, #footer .recent {
    width: 90%;
    float: none; }

  .rw-line {
    display: inline; }

  .link_list div {
    display: block;
    overflow: hidden;
    margin-bottom: 1.75em;
    width: 80%; }

  ul.social li {
    display: inline-block;
    margin-right: 1%; } }
@media only screen and (min-width: 45em) {
  .rw-line {
    display: block;
    overflow: hidden; } }
#footer li {
  list-style: none; }

#footer .recent p {
  margin-bottom: .75em; }

  #footer h3 {
    margin-top:0;
  }

/*  -----------------------------------------------
 =form bits
 -----------------------------------------------*/
fieldset {
  padding: 10px 0 20px 0;
  border: none; }

#contact .textinput, #comment_form .textinput {
  float: left;
  margin: 0;
  width: 80%;
  height: 40px;
  background-color: #f7f8f8;
  border: 1px solid #c8c9c9;
  color: #525252;
  padding: 2px 15px 4px 2px;
  margin-bottom: 10px; }

#contact .textarea, #comment_form .textarea {
  float: left;
  margin: 0;
  padding: 4px 15px 4px 2px;
  width: 208px;
  height: 110px;
  border: 1px solid #c8c9c9;
  background-color: #f7f8f8;
  color: #525252;
  overflow: auto; }

#comment_form .textarea {
  background-color: #f7f8f8;
  color: #525252;
  border: 1px solid #c8c9c9;
  background-image: none;
  width: 80%; }

#contact input.submit_btn, #comment_form input.submit_btn {
  margin: 1em 0 0 0; }

label {
  width: 60%;
  display: block;
  padding: 0 5px 0 0;
  margin: 0 0 10px 0; }

br, #blog_nav #search br, #comment_form br {
  clear: left; }

#search #search_btn {
  width: 34px;
  height: 32px;
  margin: -3px 0 0 0;
  float: left; }

#search .textinput {
  width: 148px;
  height: 20px;
  border: 1px solid #c8c9c9;
  float: left;
  padding: 2px 15px 4px 2px; }

/*  -----------------------------------------------
 =comments area
 -----------------------------------------------*/
#comments {
  margin: 30px 0 10px 0; }

#comments h4 {
  margin: 0;
  padding: 0; }

#reply {
  margin: 40px 0; }

p.commentmetadata {
  font-size: 10px;
  padding: 0 0 5px 0; }

#comments .single_comment {
  padding: 6px 0 12px 0;
  mragin: 0 0 20px 0; }

/* -----------------------------------------------
 =links stylin' 
-----------------------------------------------*/
#container a:link {
  color: #AD0271; }

#nav_links a:link {
  text-decoration: none !important; }

#container a:visited {
  color: #764282; }

#container a:hover {
  text-decoration: underline;
  color: #764282; }

#footer a:link, #footer a:visited {
  padding: 0;
  color: #D0419F;
  text-decoration: none;
  background: none; }

#footer a:hover {
  color: #764282; }

#footer #one p > a {
  /*border-bottom: 1px dashed #AD0271;*/ }

#container h3 a:visited {
  text-decoration: none; }

#container h3 a:hover {
  text-decoration: none;
  color: #764282; }

a {
  transition: 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); }

div.syntax_hilite {
  background-color: white; }

div.syntax_hilite ol {
  background-color: white;
  padding: 0 0 0 30px; }

/* --------------------------------------------
 =workshops page	
-----------------------------------------------*/
.date {
  background: #f7f8f8;
  width: 90%;
  margin: 0.25em auto 1em auto;
  padding: .5em 5%;
  text-align: center;
  overflow: hidden; }

.city {
  display: block;
  padding: 0.25em;
  width: 90%;
  margin: 0 auto; }

.city.pink {
  color: #AD0271 !important; }

a.tickets {
  color: white !important;
  background: #764282;
  padding: 0.25em;
  display: block;
  width: 90%;
  text-align: center;
  margin: .6em 0 0 0; }

a.tickets:visited, a.tickets:active, a.tickets:hover {
  color: white !important; }

a.tickets:hover {
  background: #AD0271; }

a.tickets small {
  font-size: 0.85em;
  display: inline;
  margin: auto;
  letter-spacing: inherit;
  opacity: 1; }

#mc_embed_signup {
  background: #f7f8f8;
  margin: 2em 0; }


div.callout {
    margin: 2em auto;
    padding: 1em 3%;
    width:90%;
    background: #eee8f1;
    text-align: center;
}

@media only screen and (min-width: 45em) {
  .date {
    text-align: left; }

  a.tickets {
    float: right;
    width: 30%;
    text-decoration: none !important; }

  .city {
    float: left;
    width: 65%;
    margin: 0; } 

}

@media only screen and (min-width: 50em) {
div.topic-list {
    font-size: .85em;
    padding-top:1em;

    -webkit-columns: 2 200px;
     -moz-columns: 2 200px;
          columns: 2 200px;

    -webkit-column-gap: 1.5em;
     -moz-column-gap: 1.5em;
          column-gap: 1.5em;      
  }

  div.topic-list p {
    margin-bottom:1em;
  }
}

.vidshow {
  width: 80%;
  margin: 2em auto;
}

/* --------------------------------------------
 =work samples page	
-----------------------------------------------*/
body#ws .content_main #not_blog_content {
  padding: 0 0 80px 20px;
  width: 670px;
  /*690*/
  float: left; }

#portfolio_width {
  padding: 0 0 80px 20px;
  width: 920px;
  float: left; }

#portfolio_width .project_display {
  margin: 10px 0 40px 0; }

.project_display .project_header {
  margin: 0;
  padding: 10px;
  width: 660px;
  min-height: 80px;
  border-top: 1px solid #525252;
  border-bottom: 1px solid #525252; }

.project_header p {
  margin: 3px 0 0 0;
  padding: 0; }

.project_header strong {
  color: #AD0271;
  font-weight: bold; }

.project_display img {
  margin: 10px 0 20px 0;
  border-bottom: 2px solid #525252; }

/*------*/
ul#work_list {
  margin-top: 20px; }

ul#work_list li {
  list-style: none;
  float: left;
  padding: 0 50px 20px 0;
  margin-top: 20px;
  width: 280px;
  height: 129px; }

.display_archive {
  margin: 2em 0 6em 0; }

.campaign {
  margin: 0 0 2em 0;
  font-size: 1.6rem; }

.testimonial {
  margin: 1em 0 3em 0; }
  .testimonial blockquote {
    font-size: 1.1em; }
  .testimonial blockquote p {
    margin-bottom: .5em; }
  .testimonial p.credit {
    text-align: right;
    margin-right: 2em; }

a.but {
  color: white !important;
  background: #764282;
  padding: 0.1em 0.6em; }

a.but:visited, a.but:active, a.but:hover {
  color: white !important; }

a.but:hover {
  background: #AD0271;
  text-decoration: none !important; }