/*
  Styles.css 2.0
  - http://www.w3schools.com/css/default.asp
  - http://www.sohtanaka.com/web-design/category/css-xhtml-tutorials/
*/

body {
  font-family : Verdana, Arial;
  font-size : 1.0em;
  padding : 0;
  margin : 0;
  color: #cecece;
}

img {
  border : 0px;
}

.outer {
  width : 900px;
  margin : 4em auto 0 auto;
  text-align : left;
}

.left {
  float : left;
  padding : 0;
  text-align : right;
  width : 600px;
}

/*
  Backgrounds en un enlace (A HREF):
  - Ejemplo: http://davidrhysthomas.co.uk/so/a-img-bg.html
  - Ejemplo: http://www.designcodeexecute.com/2008/04/09/css-text-link-image-icon-hover-replace-with-images/
  - Float: http://www.w3schools.com/css/tryit.asp?filename=trycss_float_elements
  - Imágenes en grises: http://hopelessthunder.org/tutorials/photofiltre/
*/

.left a {
  display : block;
  float : left;
  margin : 10px;
  width : 128px;
  height : 128px;
}

.left a.cv { background : #fff url(img/personal_gris.png) 0 0 no-repeat; }
.left a.blog { background : #fff url(img/blog_gris.png) 0 0 no-repeat; }
.left a.wiki { background : #fff url(img/wiki_gris.png) 0 0 no-repeat; }
.left a.delicious { background : #fff url(img/delicious_gris.png) 0 0 no-repeat; }
.left a.flickr { background : #fff url(img/flickr_gris.png) 0 0 no-repeat; }
.left a.google { background : #fff url(img/google_gris.png) 0 0 no-repeat; }
.left a.youtube { background : #fff url(img/youtube_gris.png) 0 0 no-repeat; }
.left a.vimeo { background : #fff url(img/vimeo_gris.png) 0 0 no-repeat; }
.left a.linkedin { background : #fff url(img/linkedin_gris.png) 0 0 no-repeat; }
.left a.facebook { background : #fff url(img/facebook_gris.png) 0 0 no-repeat; }

.left a.cv:hover { background : #fff url(img/personal.png) 0 0 no-repeat; }
.left a.blog:hover { background : #fff url(img/blog.png) 0 0 no-repeat; }
.left a.wiki:hover { background : #fff url(img/wiki.png) 0 0 no-repeat; }
.left a.delicious:hover { background : #fff url(img/delicious.png) 0 0 no-repeat; }
.left a.flickr:hover { background : #fff url(img/flickr.png) 0 0 no-repeat; }
.left a.google:hover { background : #fff url(img/google.png) 0 0 no-repeat; }
.left a.youtube:hover { background : #fff url(img/youtube.png) 0 0 no-repeat; }
.left a.vimeo:hover { background : #fff url(img/vimeo.png) 0 0 no-repeat; }
.left a.linkedin:hover { background : #fff url(img/linkedin.png) 0 0 no-repeat; }
.left a.facebook:hover { background : #fff url(img/facebook.png) 0 0 no-repeat; }

/*
  Replace Text on hover:
  - http://archivist.incutio.com/viewlist/css-discuss/77706
*/

.left span { display : none; }
.left span.flickr { display : inline; }

.right {
  font-size : 1.5em;
  float : right;
  padding : 0;
  text-align : right;
  width : 300px;
}

.right b {
  font-size : 1.1em;
  color: #858585;
}

#boxesText { 
  font-size : 1.2em;
  padding : 5px;
  margin : 10px 15px;
}