/*--- General ---*/
*{margin:0;padding:0;list-style:none;}
body{font-size:0.825em;color:#fff;background:#000;-webkit-font-smoothing:antialiased;moz-font-smoothing: antialiased;font-smoothing: antialiased;}
header{position: relative;background:url("logo.png") no-repeat;background-position:top center;padding:19.4em 0 1em 0}

/*--- Scaler ---*/
*{border:0;margin:0;padding:0;outline:0}
html,body{width:100%;height:100%;overflow:hidden}

#holder{position:absolute;width:200%;height:200%;top:-50%;left:-50%}
#holder[id]{display:table}
#holder div{position:absolute;left:0;top:50%}
#holder[id] div{display:table-cell;vertical-align:middle;position:static}
#holder img{position:relative;top:-50%;margin:0 auto;display:block;-ms-interpolation-mode:bicubic;width:50%}
*:first-child+html #holder div{position:absolute}

#body{position:absolute;margin: 0 auto;z-index:2;width:100%;height:100%;overflow:auto}

/*--- Text ---*/
@font-face {font-family: 'ClaireHandRegular';src: url('ClaireHandRegular.otf')}
h1#logo{background:url("logo.png");text-indent:-9999px;margin: 0.2em auto;height:0px}
h2{font: 1.6em 'ClaireHandRegular', Arial, sans-serif;text-align: right;line-height:1.4em;margin-bottom:0px;text-shadow: 1px 1px 4px #1e282c;clear:both;}
h3{font: 1em 'ClaireHandRegular', Arial, sans-serif;text-align:left;margin:5px 5px 0 0;text-shadow: 1px 1px 4px #1e282c;text-align:center;margin-left:300px;margin-top:-60px}

a{color:#20a6fc;text-decoration:none}
a:hover{text-decoration: underline}

ul li img{float:left;margin:0 5px 5px 0;opacity:.5;-webkit-transition:opacity 0.3s linear;-moz-transition:opacity 0.3s linear;-o-transition:opacity 0.3s linear}
ul li img:hover{opacity:1}

/*--- Modal window ---*/
label {
  display: block;
  margin: 20px 0;
  float: right;
  width: 194px;
  height: 61px;
  background:url("downloadButton.png");
  opacity:.8;
}

label:hover {
	opacity: 1;
  cursor: pointer;
}

input#toggle {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

.modal {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -100;
  margin: auto;
  padding: 20px;
  width: 300px;
  height: 130px;
  border-radius: 10px;
  background-color: #000;
 
  -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.1);
  box-shadow: 3px 3px 3px rgba(0,0,0,0.1);
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
 
  -webkit-transition: opacity 1s ease;
  -moz-transition: opacity 1s ease;
  -ms-transition: opacity 1s ease;
  -o-transition: opacity 1s ease;
  transition: opacity 1s ease;
}

.modal h2 {
  color: #fff;
  text-transform: uppercase;
  text-align: left;
  margin: 10px;
  font: 1.8em 'ClaireHandRegular', Arial, sans-serif;line-height:1.4em;}
 
.modal p {
  color: #444;
  text-align: left;
  margin: 10px;
  font: 1.3em 'ClaireHandRegular', Arial, sans-serif;line-height:1em;}
}

input#toggle:checked + .modal {
  opacity: 1;
  z-index: 1;
}

input#toggle:checked + .modal {
  opacity: 1;
  z-index: 1;
}

/*--- Elements ---*/
.col{width:300px;float: left;margin:15px;margin-right:20px;}
.colWide{width:415px;float: left;margin:15px}
#content{margin: 0 auto;width:860px}
#blogButton{font:1em 'ClaireHandRegular', Arial, sans-serif;color:#fff;width:178px;height:46px;display: block}
#buttonBg{background:url("blogButton.png")}
#buttonBg:hover{opacity:1;cursor: default}
#greenlight{margin-bottom:20px;float:right}

a.bFade {display: inline-block;position: relative;width:158px;height:26px;float:right;font: 1em 'ClaireHandRegular', Arial, sans-serif;color:#fff;padding:13px 10px;text-decoration: none;text-align: left center;text-shadow: 1px 1px 4px #1e282c;}
a.bFade strong{*display: inline;*zoom:1;position: relative;}
#arr{font-family: 'ComicSansMS';padding-left:5px}
#bg {position: absolute;top:0;left:0;bottom:0;right:0;background: url(blogButton.png) no-repeat;opacity:.0;-webkit-transition: opacity 0.5s;-moz-transition:opacity 0.5s;-o-transition:opacity 0.5s}
.bFade:hover #bg{opacity: 1}

#social{position:absolute;top:20px;right:20px}
.fade {display: inline-block;position: relative;text-indent:-9999px;width:40px;height:40px;background: url(socialSprite.png) no-repeat;}
.facebook{background-position:-40px 0}
.youtube{background-position:-80px 0}
.fade span {position: absolute;top:0;left:0;bottom:0;right:0;background: url(socialSprite.png) no-repeat;background-position:0 -40px;opacity:0;-webkit-transition: opacity 0.5s;-moz-transition:opacity 0.5s;-o-transition:opacity 0.5s}
.facebook span{background-position:-40px -40px}
.youtube span{background-position:-80px -40px}
.fade:hover span {opacity:1}

#email{background-position:0 0}
#facebook{background-position:-28px 0}
#twitter{background-position:-56px 0}
#linkedin{background-position:-84px 0}
#vimeo{background-position:-112px 0}
#dribble{background-position:-140px 0}
#email:hover{background-position:0 -28px}
#facebook:hover{background-position:-28px -28px}
#twitter:hover{background-position:-56px -28px}
#linkedin:hover{background-position:-84px -28px}
#vimeo:hover{background-position:-112px -28px}
#dribble:hover{background-position:-140px -28px}