/*
   styles.css
   okonet.ru
   
   Created by Andrew Okonetchnikov on 2010-07-16.
   Copyright 2010 okonet.ru. All rights reserved.
*/

body {
  margin: 0;
  padding: 75px 20% 0;
  font: 1em/2 'Droid Serif', Georgia, Times, serif;
  color: #444;
  background: #fff;
  max-width: 800px;
}

h1 { 
  margin-bottom: 0;
  font: bold 2.5em 'Droid Sans', 'Helvetica Neue',Arial,sans-serif;
  font-weight: 600;
  letter-spacing: -0.03em;
  text-rendering: optimizeLegibility;
  color: #000;
}
h2 {
  margin-bottom: 2em;
  font: italic normal 1.35em 'Droid Serif', 'Helvetica Neue',Arial,sans-serif;
  font-weight: 100;
  text-rendering: optimizeLegibility;
}

ul {
  margin: 0 0 0 -0.75em;
  padding: 0;
}
  ul li {
    list-style-position: inside;
  }

footer {
  margin-top: 5em;
  margin-left: -1em;
  font-size: .75em;
  color: #999;
}

.photo {
  position: fixed;
  margin-top: -.25em;
  margin-left: -100px;
}
  .photo img {
    display: block;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
  }
  
/* Blue Beanie */
.with-blue-beanie .beanie {
  position: absolute;
  top: -25px;
  left: 0px;
  width: 64px;
  height: 40px;
  
  -webkit-border-top-left-radius: 40px;
  -webkit-border-top-right-radius: 40px;
  -moz-border-radius-topleft: 40px;
  -moz-border-radius-topright: 40px;
  border-top-left-radius: 40px;
  border-top-right-radius: 40px;
  
  background-color: rgb(106,170,242);
  background-image: -webkit-gradient(
      linear,
      left bottom,
      left top,
      color-stop(0.21, rgb(26,63,128)),
      color-stop(0.3, rgb(50,105,207)),
      color-stop(0.82, rgb(106,170,242))
  );
  background-image: -moz-linear-gradient(
      center bottom,
      rgb(26,63,128) 21%,
      rgb(50,105,207) 30%,
      rgb(106,170,242) 82%
  );
  
  -webkit-box-shadow: 0 0 10px #FFF inset;
  -moz-box-shadow: 0 0 10px #FFF inset;
  -o-box-shadow: 0 0 10px #FFF inset;
  box-shadow: 0 0 10px #FFF inset;
  
  -webkit-transform: rotate(-12deg) scale(0.85);
  -moz-transform: rotate(-12deg) scale(0.85);
  -o-transform: rotate(-12deg) scale(0.85);
  transform: rotate(-12deg) scale(0.85);
  
  -webkit-transform-style: preserve-3d;
  -webkit-transition-property: -webkit-transform;
  -webkit-transition-duration: .35s;
  -webkit-transition-timing-function: cubic-bezier(0.5, 0.3, 0.2, 1);
  -moz-transition-property: -moz-transform;
  -moz-transition-duration: .35s;
  -moz-transition-timing-function: cubic-bezier(0.5, 0.3, 0.2, 1);
  -o-transition-property: -o-transform;
  -o-transition-duration: .35s;
  -o-transition-timing-function: cubic-bezier(0.5, 0.3, 0.2, 1);
  transition-property: transform;
  transition-duration: .35s;
  transition-timing-function: cubic-bezier(0.5, 0.3, 0.2, 1);
}
  .with-blue-beanie .beanie i {
    position: absolute;
    left: -3px;
    bottom: -6px;
    width: 70px;
    height: 15px;
    background-color: rgb(106,170,242);
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        from(rgb(26,63,128)),
        to(rgb(106,170,242))
    );
    background-image: -moz-linear-gradient(
        center bottom,
        rgb(26,63,128),
        rgb(106,170,242)
    );
    border-radius: 4px;
    
    -webkit-box-shadow: 0 4px 8px #000;
    -moz-box-shadow: 0 4px 8px #000;
    -o-box-shadow: 0 4px 8px #000;
    box-shadow: 0 4px 8px #000;
  }

.with-blue-beanie:hover .beanie {
  -webkit-transform: rotate(-15deg) scale(0.85) translateY(-10px);
  -moz-transform: rotate(-15deg) scale(0.85) translateY(-10px);
  -o-transform: rotate(-15deg) scale(0.85) translateY(-10px);
  transform: rotate(-15deg) scale(0.85) translateY(-10px);
}  
  
  

.lnk-with_icon {
  padding-left: 26px;
  background-image: url(../img/i-services.gif);
  background-repeat: no-repeat;
}

.profile_lastfm   { background-position: 4px 0px; }
.profile_linkedin { background-position: 4px -26px; }
.profile_flickr   { background-position: 4px -52px; }
.profile_gravatar { background-position: 4px -78px; }
.profile_github   { background-position: 4px -104px; }
.profile_twitter  { background-position: 4px -181px; }

.lnk_safariext    { background-position: 4px -129px; }
.lnk_ytranslator  { background-position: 4px -156px; }

/* Microformats styling */
.vcard {
}
.adr .type,
.adr .street-address,
.adr .postal-code {
  display:none;
}

/* Media queries */
@media all and (max-width: 1000px) { 
  body {
    line-height: 1.5;
    max-width: auto;
  }
  h1 { font-size: 2em; }
  h2 { font-size: 1.25em; }
  .photo { margin-top: 0; }
}

@media all and (max-width: 480px) { 
  body {
    padding: 20px 20px 0 80px;
    font-size: .75em;
    line-height: 1.5;
    max-width: auto;
  }
  h1 { font-size: 1.5em; }
  h2 { font-size: 1em; }
  .photo {
    margin-left: -60px;
  }
    .photo img {
      width: 48px;
      height: 48px;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      border-radius: 4px;
    }
    .with-blue-beanie .beanie {
      -webkit-transform: rotate(-12deg) scale(0.5) translateX(-25px);
      -moz-transform: rotate(-12deg) scale(0.5) translateX(-25px);
      -o-transform: rotate(-12deg) scale(0.5) translateX(-25px);
      transform: rotate(-12deg) scale(0.5) translateX(-25px);
    }
}

/* iPhone and iPad */
@media all and (max-device-width: 1024px) {
  body { font-family: Georgia, Times, serif; }
  h1,h2 { font-family: 'Helvetica Neue',Arial,sans-serif }
  .photo { margin-top: 1.35em; }