@font-face {
    font-family: 'Aller-web';
    src: url('../font/aller_lt-webfont.eot');
    src: url('../font/aller_lt-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/aller_lt-webfont.woff') format('woff'),
         url('../font/aller_lt-webfont.ttf') format('truetype'),
         url('../font/aller_lt-webfont.svg#AllerLightRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'MuseoSlab500';
    src: url('../font/Museo_Slab_500-webfont.eot');
    src: url('../font/Museo_Slab_500-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/Museo_Slab_500-webfont.woff') format('woff'),
         url('../font/Museo_Slab_500-webfont.ttf') format('truetype'),
         url('../font/Museo_Slab_500-webfont.svg#webfontyumMOUTD') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
	font-family: "SSStandard";
	src: url('../font/ss-standard.eot');
	src: url('../font/ss-standard.eot?#iefix') format('embedded-opentype'),
	     url('../font/ss-standard.woff') format('woff'),
	     url('../font/ss-standard.ttf')  format('truetype'),
	     url('../font/ss-standard.svg#SSStandard') format('svg');
	font-weight: normal;
  	font-style: normal;
}

.ss-icon, [class^="ss-"]:before, [class*=" ss-"]:before,
.ss-icon.ss-standard, [class^="ss-"].ss-standard:before, [class*=" ss-"].ss-standard:before {
  font-family: "SSStandard";
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
  text-rendering: optimizeLegibility;
  white-space: nowrap;
  -webkit-font-feature-settings: "liga", "dlig";
  -moz-font-feature-settings: "liga=1, dlig=1";
  -moz-font-feature-settings: "liga", "dlig";
  -ms-font-feature-settings: "liga", "dlig";
  -o-font-feature-settings: "liga", "dlig";
  font-feature-settings: "liga", "dlig";
  padding-right: 10px;
  vertical-align: middle;
}

.ss-cursor:before{content:''}.ss-crosshair:before{content:'⌖'}.ss-search:before{content:'🔎'}.ss-view:before{content:'👀'}.ss-attach:before{content:'📎'}.ss-link:before{content:'🔗'}.ss-move:before{content:''}.ss-write:before{content:'✎'}.ss-writingdisabled:before{content:''}.ss-erase:before{content:'✐'}.ss-compose:before{content:'📝'}.ss-lock:before{content:'🔒'}.ss-unlock:before{content:'🔓'}.ss-key:before{content:'🔑'}.ss-backspace:before{content:'⌫'}.ss-ban:before{content:'🚫'}.ss-trash:before{content:''}.ss-target:before{content:'◎'}.ss-tag:before{content:''}.ss-bookmark:before{content:'🔖'}.ss-flag:before{content:'⚑'}.ss-like:before{content:'👍'}.ss-dislike:before{content:'👎'}.ss-heart:before{content:'♥'}.ss-halfheart:before{content:''}.ss-star:before{content:'⋆'}.ss-halfstar:before{content:''}.ss-sample:before{content:''}.ss-crop:before{content:''}.ss-layers:before{content:''}.ss-phone:before{content:'📞'}.ss-phonedisabled:before{content:''}.ss-rss:before{content:''}.ss-facetime:before{content:''}.ss-reply:before{content:'↩'}.ss-mail:before{content:'✉'}.ss-inbox:before{content:'📥'}.ss-chat:before{content:'💬'}.ss-user:before{content:'👤'}.ss-femaleuser:before{content:'👧'}.ss-users:before{content:'👥'}.ss-cart:before{content:''}.ss-creditcard:before{content:'💳'}.ss-barchart:before{content:'📊'}.ss-piechart:before{content:''}.ss-box:before{content:'📦'}.ss-home:before{content:'⌂'}.ss-globe:before{content:'🌎'}.ss-navigate:before{content:''}.ss-compass:before{content:''}.ss-signpost:before{content:''}.ss-location:before{content:''}.ss-map:before{content:''}.ss-pin:before{content:'📍'}.ss-database:before{content:''}.ss-music:before{content:'♫'}.ss-mic:before{content:'🎤'}.ss-volume:before{content:'🔈'}.ss-volumelow:before{content:'🔉'}.ss-volumehigh:before{content:'🔊'}.ss-airplay:before{content:''}.ss-camera:before{content:'📷'}.ss-picture:before{content:'🌄'}.ss-video:before{content:'📹'}.ss-play:before{content:'▶'}.ss-pause:before{content:''}.ss-stop:before{content:'■'}.ss-record:before{content:'●'}.ss-rewind:before{content:'⏪'}.ss-fastforward:before{content:'⏩'}.ss-skipback:before{content:'⏮'}.ss-skipforward:before{content:'⏭'}.ss-eject:before{content:'⏏'}.ss-repeat:before{content:'🔁'}.ss-replay:before{content:'↺'}.ss-shuffle:before{content:'🔀'}.ss-notebook:before{content:'📓'}.ss-grid:before{content:''}.ss-rows:before{content:''}.ss-columns:before{content:''}.ss-desktop:before{content:'💻'}.ss-laptop:before{content:''}.ss-tablet:before{content:''}.ss-cell:before{content:'📱'}.ss-battery:before{content:'🔋'}.ss-batteryhigh:before{content:''}.ss-batterymedium:before{content:''}.ss-batterylow:before{content:''}.ss-batteryempty:before{content:''}.ss-clouddownload:before{content:''}.ss-download:before{content:''}.ss-cloudupload:before{content:''}.ss-upload:before{content:''}.ss-fork:before{content:''}.ss-merge:before{content:''}.ss-refresh:before{content:'↻'}.ss-sync:before{content:''}.ss-loading:before{content:''}.ss-wifi:before{content:''}.ss-connection:before{content:''}.ss-file:before{content:'📄'}.ss-folder:before{content:'📁'}.ss-quote:before{content:'“'}.ss-text:before{content:''}.ss-font:before{content:''}.ss-print:before{content:'⎙'}.ss-fax:before{content:'📠'}.ss-list:before{content:''}.ss-layout:before{content:''}.ss-action:before{content:''}.ss-expand:before{content:'⤢'}.ss-contract:before{content:''}.ss-help:before{content:'❓'}.ss-info:before{content:'ℹ'}.ss-alert:before{content:'⚠'}.ss-caution:before{content:'⛔'}.ss-plus:before{content:'+'}.ss-hyphen:before{content:'-'}.ss-dropdown:before{content:'▾'}.ss-check:before{content:'✓'}.ss-delete:before{content:'␡'}.ss-settings:before{content:'⚙'}.ss-dashboard:before{content:''}.ss-notifications:before{content:'🔔'}.ss-notificationsdisabled:before{content:'🔕'}.ss-clock:before{content:'⏲'}.ss-stopwatch:before{content:'⏱'}.ss-calendar:before{content:'📆'}.ss-calendaradd:before{content:''}.ss-calendarremove:before{content:''}.ss-calendarcheck:before{content:''}.ss-briefcase:before{content:'💼'}.ss-cloud:before{content:'☁'}.ss-navigateup:before{content:''}.ss-navigateright:before{content:'▻'}.ss-navigatedown:before{content:''}.ss-navigateleft:before{content:'◅'}.ss-up:before{content:'⬆'}.ss-upright:before{content:'⬈'}.ss-right:before{content:'➡'}.ss-downright:before{content:'⬊'}.ss-down:before{content:'⬇'}.ss-downleft:before{content:'⬋'}.ss-left:before{content:'⬅'}.ss-upleft:before{content:'⬉'}.ss-retweet:before{content:''}


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, figure, footer, header, hgroup, menu, nav, section, menu, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

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

ul {list-style: none;}

blockquote, q {quotes: none;}

blockquote:before,
blockquote:after,
q:before,
q:after {content: ''; content: none;}

a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;}

del {text-decoration: line-through;}

abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}

/* tables still need cellspacing="0" in the markup */
table {border-collapse: collapse; border-spacing: 0;}
th {font-weight: bold; vertical-align: bottom;}
td {font-weight: normal; vertical-align: top;}

hr {display: block; height: 1px; border: 0; border-top: 1px solid #000; margin: 0; padding: 0;}

input, select {vertical-align: middle;}

pre {
	white-space: pre; /* CSS2 */
	white-space: pre-wrap; /* CSS 2.1 */
	white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
	word-wrap: break-word; /* IE */
}

input[type="radio"] {vertical-align: text-bottom;}
input[type="checkbox"] {vertical-align: bottom; *vertical-align: baseline;}
.ie6 input {vertical-align: text-bottom;}

select, input, textarea {font: 99% sans-serif;}

table {font-size: inherit; font: 100%;}

/* Accessible focus treatment
	people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active {outline: none;}

small {font-size: 85%;}

strong, th {font-weight: bold;}

td, td img {vertical-align: top;}

/* Make sure sup and sub don't screw with your line-heights
	gist.github.com/413930 */
sub, sup {font-size: 75%; line-height: 0; position: relative;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}

/* standardize any monospaced elements */
pre, code, kbd, samp {font-family: monospace, sans-serif;}

/* hand cursor on clickable elements */
.clickable,
label,
input[type=button],
input[type=submit],
button {cursor: pointer;}

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea {margin: 0;}

/* make buttons play nice in IE */
button {width: auto; overflow: visible;}

/* scale images in IE7 more attractively */
.ie7 img {-ms-interpolation-mode: bicubic;}

/* prevent BG image flicker upon hover */
.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}

/* let's clear some floats */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

/*
COLORS :

dark gray :         #333333     rgb(51, 51, 51)
medium gray:        #6a7476     rgb(106, 116, 118)
light gray :        #a3b3b5     rgb(163, 179, 181)
blue :              #58cbdb     rgb(88, 203, 219)
pink :              #db5893     rgb(219, 88, 147)
light beige :       #eeede7     rgb(238, 237, 231)

*/

/* General styles!
-------------------------------------------------------------------------------*/

body {
    background: #eeede7 url(../img/back.png) repeat;
    font-family: 'Aller-web', Arial, sans-serif;
    font-size: 18px;
    line-height: 1.6em;
    color: #6a7476;
}

.language {
    font-size: 13px;
    text-align: right;
    color: #000;
    padding: 20px 20px 0 0;
}

.site {
    background-image: url(../img/header.png);
    background-repeat: repeat-x;
    text-align: center;
}

.ie6 .site, .ie7 .site {
    height: 1%;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
	body {
		background-image: url(../img/back2.png);
		background-size: 250px 250px;
	}
	.site {
	    background-image: url(../img/header2.png);
	    background-size: 50px 500px;
	}
}

.page {
    width: 400px;
    margin: 20px auto;
    text-align: left;
    background-color: #fff;
    background-color: rgba(255,255,255,0.75);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0 0 2px rgba(72,72,72,0.4);
    -moz-box-shadow: 0 0 2px rgba(72,72,72,0.4);
    box-shadow: 0 0 2px rgba(72,72,72,0.4);
}

.ie6 .page, .ie7 .page {
    background-color: #fff;
    height: 1%;
}

a {
    text-decoration: none;
    color: #000;
    -moz-transition: color 0.4s ease-out;
    -o-transition: color 0.4s ease-out;
    -webkit-transition: color 0.4s ease-out;
    transition: color 0.4s ease-out;
}

a:hover {
    color: #db5893;
}

::-moz-selection{background: #58cbdb; color: #fff; text-shadow: none;}
::selection {background: #58cbdb; color: #fff; text-shadow: none;}

header {
    padding: 20px 0;
}

h1, .h1 {
    font-family: 'MuseoSlab500', Rockwell, serif;
    font-size: 32px;
    font-weight: normal;
    line-height: 1.3em;
    margin-bottom: 0;
    color: #6a7476;
    text-align: right;
    padding: 0 20px;
}

h1 em, .h1 em {
    font-style: normal;
    color: #db5893;
}

h1 strong, .h1 strong {
    font-weight: normal;
    color: #58cbdb;
}

h1.name, .h1 .name {
    background-color: #b5e8ef;
    background-color: rgba(88, 203, 219, 0.4);
    color: #fff;
}

.ie6 h1.name, .ie7 h1.name {
   background-color: #b5e8ef;
}

p {
    margin: 30px 20px;
}

p a {
    padding: 0 2px;
    background-color: #b9e7ec;
    background-color: rgba(88, 203, 219, 0.4);
    color: #333;
    text-decoration: none;
    -moz-transition: background-color 0.4s ease-out;
    -o-transition: background-color 0.4s ease-out;
    -webkit-transition: background-color 0.4s ease-out;
    transition: background-color 0.4s ease-out;
}

.ie6 p a, .ie7 p a {
    background-color: #b9e7ec;
}

p a:hover {
    background-color: rgba(88, 203, 219, 0.8);
    color: #000;
}

.logo {
    position: relative;
    margin: 25px 0;
    text-align: center;
}

.logo a img {
    opacity: 0.7;
    -moz-transition: all 0.4s ease-out;
    -o-transition: all 0.4s ease-out;
    -webkit-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
}

.logo a:hover img {
    opacity: 1;
}

footer {
    background-color: #f5f5f5;
    border-top: 3px solid #333;
    border-bottom: 3px solid #333;
    padding: 5px;
    font-size: 14px;
    color: #333;
    margin: 0 20px;
}

nav {
    width: 360px;
    margin: 0 auto;
    text-align: left;
}

nav li {
    position: relative;
    float: left;
    margin: 0 8px;
}

.ie6 nav li, .ie7 nav li {
    display: inline;
}

nav li a {
    display: block;
    height: 44px;
    width: 44px;
    text-indent: -9999px;
    opacity: 0.8;
}

nav li a span {
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    opacity: 0;
    -webkit-transition: opacity 0.4s;
    -moz-transition: opacity 0.4s;
    -o-transition: opacity 0.4s;
}

nav li a:hover span {
    opacity: 1;
}

nav li a#pinboard {
    background: transparent url(../img/social_iconsb.png) no-repeat 0 0;
}

nav li a#github {
    background: transparent url(../img/social_iconsb.png) no-repeat -80px 0;
}

nav li a#tumblr {
    background: transparent url(../img/social_iconsb.png) no-repeat -160px 0;
}

nav li a#instagram {
    background: transparent url(../img/social_iconsb.png) no-repeat -240px 0;
}

nav li a#twitter {
    background: transparent url(../img/social_iconsb.png) no-repeat -320px 0;
}

nav li a#linkedin {
    background: transparent url(../img/social_iconsb.png) no-repeat -400px 0;
}

nav li a#pinboard span {
    background: transparent url(../img/social_iconsb.png) no-repeat 0 -60px;
}

nav li a#github span {
    background: transparent url(../img/social_iconsb.png) no-repeat -80px -60px;
}

nav li a#tumblr span {
    background: transparent url(../img/social_iconsb.png) no-repeat -160px -60px;
}

nav li a#instagram span {
    background: transparent url(../img/social_iconsb.png) no-repeat -240px -60px;
}

nav li a#twitter span {
    background: transparent url(../img/social_iconsb.png) no-repeat -320px -60px;
}

nav li a#linkedin span {
    background: transparent url(../img/social_iconsb.png) no-repeat -400px -60px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
	nav li a#pinboard,
	nav li a#github,
	nav li a#tumblr,
	nav li a#pinterest,
	nav li a#twitter,
    nav li a#linkedin,
	nav li a#pinboard span,
	nav li a#github span,
	nav li a#tumblr span,
	nav li a#pinterest span,
	nav li a#twitter span,
    nav li a#linkedin span  {
		/* Reference the @2x Sprite */
		background-image: url(../img/social_icons2b.png);
		/* Translate the @2x sprite's dimensions back to 1x */
		background-size: 480px 120px;
	}
}

.linkedin {
    clear: both;
    padding-top: 20px;
    font-size: 0.8em;
    text-align: center;
}

.linkedin a {
    background-color: transparent;
}

.bottom {
    border-bottom: 6px solid #333;
    clear: both;
}

/* Print styles!
-------------------------------------------------------------------------------*/
@media print {
    .language, nav, .bottom {
        display: none;
    }
}


/* Media queries!
-------------------------------------------------------------------------------*/

@media screen and (max-device-width: 480px) {
	body {
	    -webkit-text-size-adjust: none;
	}
}