/* Start: Recommended Isotope styles */
/**** Isotope Filtering ****/

.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}


/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
       -o-transition-property:         top, left, opacity;
          transition-property:         transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}

/* End: Recommended Isotope styles */



/* disable CSS transitions for containers with infinite scrolling*/
.isotope.infinite-scrolling {
  -webkit-transition: none;
     -moz-transition: none;
       -o-transition: none;
          transition: none;
}


/**** Base styles ****/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  padding: 20px;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif;
  font-size: 13px;
  line-height: 1.7em;
 /* background: #1F1E1D; */
  color: #FFF;
}


h1, h2, #super-list, .element, .tagline, #index-list, 
.super-list .link {
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

h1, h2, h3 { font-weight: bold; }

h1 {
  font-size: 32px;
  line-height: 1.1em;
}

h2 {
  font-size: 24px;
  line-height: 1.1em;
}

ul, ol {
  margin-left: 1.5em;
}

a {
  /* color: #FB4; */
  color: #e55304;
  text-decoration: none;
}

a:hover,
a:hover code { 
  color: #4BF; 
}

a:active,
a:active code {
  color: #1FB;
  background: black;
}

a.nav {
	color: #fff;
}

a img { border: none; }

em { font-style: italic; }
strong { font-weight: bold; }

blockquote {
  padding-left: 1.0em;
  margin-left: 1.0em;
  border-left: 1px solid #333;
  font-style: italic;
}

/**** Isotope styles ****/

/* required for containers to inherit vertical size from window */
html {
	background: url(colinbig.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;	
}

html,
body {
  height: 100%;
  width:100%;
}

#container {
  width:60%;
  padding: 5px;
  margin-bottom: 20px;
}

.element {
 width: 230px;
 /* height: 150px; */
  margin: 5px;
  float: left;
  overflow: hidden;
  position: relative;
  background: #fff;
  color: #222;
  -webkit-border-top-right-radius: 10px;
      -moz-border-radius-topright: 10px;
          border-top-right-radius: 10px;
}


.element.shiny {
	background:transparent;
}
.element.twitter {
width:230px;
height:400px;	
}

.element.contact h3  { 
	background: #e55304; 
	width:100%;
	 -webkit-border-top-right-radius: 10px;
      -moz-border-radius-topright: 10px;
          border-top-right-radius: 10px;  

	}
.element.writing h3 { 
	background: #009ac8; 
	width:100%;
	 -webkit-border-top-right-radius: 10px;
      -moz-border-radius-topright: 10px;
          border-top-right-radius: 10px;
}
.element.screen h3  { 
	background: #eabc06;
	width:100%;
 -webkit-border-top-right-radius: 10px;
      -moz-border-radius-topright: 10px;
          border-top-right-radius: 10px;
}
.element.liveshows  h3 { 
	background: #b6c13b;
		width:100%;
 -webkit-border-top-right-radius: 10px;
      -moz-border-radius-topright: 10px;
          border-top-right-radius: 10px; 
	}


.element * {
 /*  position: absolute;
  margin: 0; */
}

.element .symbol {
 /* right: 0.2em;
   top: 0.4em; */
  font-size: 1.6em;
  line-height: 1.4em;
  color: #FFF;
  font-family: 'Raleway', sans-serif;
  font-weight:600;

}
.element.large .symbol {
  font-size: 4.5em;
}

.element.fake .symbol {
  color: #000;
}

.element .name {
  left: 0.5em;
  bottom: 1.6em;
  font-size: 1.05em;
}

.element p {
  font-size: 1em;
  margin:0.5em;
  /* left: 0.5em;
  bottom: 0.5em; */
}

.element .number {
  font-size: 1.25em;
  font-weight: bold;
  color: hsla(0,0%,0%,.5);
  right: 0.5em;
  top: 0.5em;
}

.colin #content {
  height: 100%;
}

ul.option-set {

	list-style-type: none;
	margin:0;
	padding:0;
	/* margin-left:250px; */
	margin-top:-10px;
}

ul.option-set li {
	display:inline;	
	padding-left:5px;
}

#screen a:hover {
	color:#eabc06;
}

#liveshows a:hover {
color: #b6c13b;
}

#writing a:hover {
color:#009ac8;	
}

#contact a:hover {
	color:#e55304;
}

#everything a:hover {
	color:#ccc;
}
footer {
  font-size: 12px;
  font-style: italic;
  border-top: 1px solid #333;
  padding: 0.8em 0;
  position: fixed;
  right:0;
  bottom:0;
}
.mobilebook { display:none;visibility:hidden;}

/* The Magnificent Clearfix: nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }


@media only screen 
and (max-device-width : 1024px) 
{
#background_wrap {
    z-index: -1;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-size: 100%;
    background-image: url('colinbig.jpg');
    background-attachment: fixed;
}
}

@media only screen 
and (max-device-width : 768px) 
{
#container {width:70%;}
}
@media only screen and (max-width: 480px), handheld {
#container {width:100%;}
#background_wrap {display:none;visibility:hidden;width:0;height:0;}
.mobilebook {display:block;visibility:visible;}
.normalbook { display:none;visibility:hidden;width:0;height:0;}
}