/**
 *  CSS Reset
 */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
body {line-height:1.5;}
table {border-collapse:separate;border-spacing:0;}
caption, th, td {text-align:left;font-weight:normal;}
table, td, th {vertical-align:middle;}
blockquote:before, blockquote:after, q:before, q:after {content:"";}
blockquote, q {quotes:"" "";}
a img {border:none;}
/* end CSS Reset */
.clearfix:after {content:"\0020";display:block;height:0;clear:both;visibility:hidden;overflow:hidden;}
.clearfix {display:block;}
.clear {clear:both;}

body{
  font-size:14px;
  background:#fff url('../img/bg-white.png') 0 0 repeat;
  color:#555;
  text-align: center;
  font-family: 'Molengo', arial, serif;
  -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: perspective(-750px);
     -moz-transform: perspective(-750px);
          transform: perspective(-750px);
}
.container{
  margin:0 auto;
  width:750px;
  padding-top:3em;
  text-align:left;
}
.box{
  background-color: #eee;
  background: rgba(0,0,0,0.05);
  -webkit-border-radius:3px;
     -moz-border-radius:3px;
          border-radius:3px;
  border:1px solid #ccc;
  border-top:1px solid #bbb;
  border-bottom:1px solid #ddd;
  padding:10px 20px;
  _padding:10px 15px;
  margin:21px 0;
  text-shadow:0 1px 0 #fff;
}
.box-1{
  -webkit-transition: all 0.75s ease .25s;
     -moz-transition: all 0.75s ease .25s;
          transition: all 0.75s ease .25s;
  -webkit-transform: rotateY(90deg) perspective(750px);
     -moz-transform: rotateY(90deg) perspective(750px);
          transform: rotateY(90deg) perspective(750px);
}
.box-2{
  -webkit-transition: all 0.75s ease 0.5s;
     -moz-transition: all 0.75s ease 0.5s;
          transition: all 0.75s ease 0.5s;
  -webkit-transform: rotateY(-90deg) perspective(750px);
     -moz-transform: rotateY(-90deg) perspective(750px);
          transform: rotateY(-90deg) perspective(750px);
}
.box-3{
  -webkit-transition: all 0.75s ease 0.75s;
     -moz-transition: all 0.75s ease 0.75s;
          transition: all 0.75s ease 0.75s;
  -webkit-transform: rotateY(90deg) perspective(750px);
     -moz-transform: rotateY(90deg) perspective(750px);
          transform: rotateY(90deg) perspective(750px);
}
.box-4{
  -webkit-transition: all 0.75s ease 1s;
     -moz-transition: all 0.75s ease 1s;
          transition: all 0.75s ease 1s;
  -webkit-transform: rotateY(-90deg) perspective(750px);
     -moz-transform: rotateY(-90deg) perspective(750px);
          transform: rotateY(-90deg) perspective(750px);
}
.box-5{
  -webkit-transition: all 0.75s ease 1.25s;
     -moz-transition: all 0.75s ease 1.25s;
          transition: all 0.75s ease 1.25s;
  -webkit-transform: rotateY(270deg) perspective(750px);
     -moz-transform: rotateY(270deg) perspective(750px);
          transform: rotateY(270deg) perspective(750px);
}
.container.open .box{
  -webkit-transform: rotateY(0deg);
     -moz-transform: rotateY(0deg);
          transform: rotateY(0deg);
}
.box.first{
  margin-bottom:20px;
}
.main{
  float:left;
  width:500px;
}
.sidebar{
  float:right;
  width:232px;
}
a{
  color:#2086a0;
  text-decoration:none;
}
a:hover,
a:focus{
  color:#0c5e72;
  text-decoration:underline;
}
h1{
  color:#333;
  font-size:2.571em;
  padding:2px 0;
  line-height:1;
  text-shadow:0 1px 0 #eee;
  font-family: 'Lobster', arial, serif;
  position:relative;
  padding-left:95px;
}

h1 span{
  position:absolute;
  border:3px solid #fff;
  border-bottom:13px solid #fff;
  display:block;
  width:60px;
  height:60px;
  top:-19px;
  left:-10px;
  _top:-14px;
  _left:-100px;
  background:transparent url(../img/jmvallet.jpg) 0 0 no-repeat;
  -webkit-box-shadow: 1px 2px 4px rgba(0,0,0,.35);
     -moz-box-shadow: 1px 2px 4px rgba(0,0,0,.35);
          box-shadow: 1px 2px 4px rgba(0,0,0,.35);
  -webkit-transform: rotate(-5deg) rotateZ(-90deg) scale(0);
     -moz-transform: rotate(-5deg) rotateZ(-90deg) scale(0);
          transform: rotate(-5deg) rotateZ(-90deg) scale(0);
}

.container.open .box h1 span{
  -webkit-transition: all 0.6s ease-in-out .4s;
     -moz-transition: all 0.6s ease-in-out .4s;
          transition: all 0.6s ease-in-out .4s;
  -webkit-transform: rotate(-5deg) rotateZ(0) scale(1);
     -moz-transform: rotate(-5deg) rotateZ(0) scale(1);
          transform: rotate(-5deg) rotateZ(0) scale(1);
}

h2{
  font-size:1.6em;
  color:#333;
  text-shadow:0 1px 0 #eee;
  font-family: 'Lobster', arial, serif;
}
p{
  font-size:1.429em;
  font-weight:normal;
  text-shadow:0 1px 0 #eee;
}
ul.on-the-web{
  margin-top:5px;
  list-style: none;
  text-shadow:0 1px 0 #eee;
}
ul.on-the-web li{
  margin-bottom:10px;
  float:left;
  width:49%;
}
.on-the-web a{
  display:block;
}
.on-the-web a:hover{
  text-decoration:underline;
  -webkit-transition: all .1s ease-in-out;
     -moz-transition: all .1s ease-in-out;
          transition: all .1s ease-in-out;
}
.on-the-web a span.logo{
  display:block;
  width:32px;
  height:32px;
  margin-top:5px;
  float:left;
  margin-right:10px;
  opacity:.7;
}
.on-the-web a:hover span.logo{
  opacity:1;
  -webkit-transition: all .1s ease-in-out;
     -moz-transition: all .1s ease-in-out;
          transition: all .1s ease-in-out;
}
.on-the-web a span.content{
  float:left;
  font-size:0.86em;
}
.on-the-web a span.label{
  display:block;
  color:#444;
  font-size:1.33em;
}
.on-the-web a:hover span.label{
  color:#222;
}
.on-the-web a:hover{
  text-decoration:none;
}
.on-the-web a:hover span.url{
  text-decoration:underline;
}
.on-the-web a span.flickr{
  background:transparent url(../img/logos/flickr.png) 0 0 no-repeat;
}
.on-the-web a span.twitter{
  background-image: url(../img/logos/twitter.png);
}
.on-the-web a span.linkedin{
  background-image: url(../img/logos/linkedin.png);
}
.on-the-web a span.github{
  background-image: url(../img/logos/github.png);
}
.on-the-web a span.delicious{
  background-image: url(../img/logos/delicious.png);
}
.on-the-web a span.zootool{
  background-image: url(../img/logos/zootool.png);
}
#flickr-images a{
  margin:5px;
  border:5px solid #fff;
  display:block;
  float:left;
  width:75px;
  height:75px;
  -webkit-transition: all .1s ease-in-out;
     -moz-transition: all .1s ease-in-out;
          transition: all .1s ease-in-out;
}
#flickr-images a:hover,
#flickr-images a:focus{
  -webkit-box-shadow:1px 1px 4px rgba(0,0,0,.3);
     -moz-box-shadow:1px 1px 4px rgba(0,0,0,.3);
          box-shadow:1px 1px 4px rgba(0,0,0,.3);
  -webkit-transform: rotate(-2deg) scale(1.05);
     -moz-transform: rotate(-2deg) scale(1.05);
          transform: rotate(-2deg) scale(1.05);
}
#flickr-images a:nth-child(even):hover,
#flickr-images a:nth-child(even):focus{
  -webkit-transform: rotate(2deg) scale(1.05);
     -moz-transform: rotate(2deg) scale(1.05);
          transform: rotate(2deg) scale(1.05);
}
#flickr-images{
  margin:5px 0 10px 0;
}
.footer{
  margin-top:2em;
  font-size:0.79em;
  color:#bbb;
  text-shadow:0 1px 0 #fff;
}
.footer a{
  color:#bbb;
}