@charset "UTF-8";

/* •••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
   ••  Riddle.pl                                                    ••
   ••  Updated: March 2010                                          ••
   ••                                                               ••
   ••  Copyright 2010 Piotr Petrus                                  ••
   ••  Feel free to learn and adapt techniques used here,           ••
   ••  but don’t just copy and call it yours.                       ••
   •••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••   
   
   0. RESET & FONTS
   1. GLOBAL
   2. LAYOUT
   3. HEADER
   4. PORTFOLIO
        3.1 Description
        3.2 Description Developer
        3.3 Description Designer
        3.4 Description JavaScript
        3.5 Position
        3.6 Thumbnail
        3.7 Thumbnail Hover
        
   5. COPY
   6. COMMANDS
   
---------------------------------------------------------------------- */

/* 0. RESET & FONTS
•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */

abbr, address, article, aside, audio, b, blockquote, body, canvas, 
caption, cite, code, dd, del, details, dfn, div, dl, dt, em, fieldset,
figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup,
html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, 
object, ol, p, pre, q, samp, section, small, span, strong, sub, summary, 
sup, table, tbody, td, tfoot, th, thead, time, tr, ul, var, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
	background-color: transparent;
}

article, aside, canvas, details, figcaption, figure, footer, header, 
hgroup, menu, nav, section, summary {
  display: block;
}

address, cite, q, dfn {
  font-style: normal;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
}

a, ins, del {
  text-decoration: none
}

q, blockquote {
	quotes: none;
}

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

table {
	border-collapse: collapse;
	border-spacing: 0;
}

th, td {
  vertical-align: top;
}

th {
  text-align: left;
}

button, input, select, textarea {
  font: inherit;
}

pre, code, var, samp, kbd {
  font-family: monospace, sans-serif;
}

/*
 * The fonts included are copyrighted by the vendor listed below.
 * @vendor:     Apostrophic Labs
 * @vendorurl:  http://moorstation.org/typoasis/designers/lab/index.htm
 * @licenseurl: http://www.fontsquirrel.com/license/Steinem
 */

@font-face {
	font-family: "SteinemBold";
	src: local("Steinem Bold"), local("Steinem-Bold"), url("fonts/STEINEMB.ttf") format("truetype");
}

/* 1. GLOBAL
•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */

body {
  font: normal 14px/18px "Helvetica Neue", Arial, sans-serif;
  background-color: #fff;
  color: #464646;
}

a {
  color: #000;
  font-weight: bold;
}

h2 {
  color: #2e3133;
}

p, small {
  display: block;
  margin-top: 18px;
}

small {
  font-size: 11px;
  color: #808080;
}

/* 2. LAYOUT
•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */

.columns .st,
.columns .nd {
  position: absolute;
  z-index: 10;
  top: 0;
  bottom: 0;
  min-width: 500px;
  padding-top: 306px;
}

.animation .columns .st,
.animation .columns .nd {
  min-width: 0 !important;
}

.columns .st {
  left: 0;
  right: 50%;
  color: #fff;  
}

.columns .nd {
  left: 50%;
  right: 0;
  z-index: 5;
}

@media screen and (max-width: 999px) {
  .columns .nd { left: 500px !important; }
  .part-left .columns .nd { left: 800px !important; }  
  .part-right .columns .nd { left: 200px !important; }  
}

.columns .st,
.columns .st .inner {
  background: #2e3133 url("st.png") repeat-y 100% 0;
}

.columns .nd,
.columns .nd .inner {
  background: #fff url("nd.png") repeat-y;
}

/* ugly code is ugly. sue me. */
.columns .inner { min-height: 1224px; }
.js .columns .inner { min-height: 918px }
.js .part-left .columns .inner,
.js .part-right .columns .inner { min-height: 1152px; }

.columns .st section,
.columns .nd section {
  max-width: 462px;
}

.columns .st section {
  margin-left: auto;
  padding-right: 18px;
  padding-left: 20px;
  padding-bottom: 18px;
}

.columns .nd section {
  padding-left: 18px;
  padding-right: 20px;
  padding-bottom: 18px;
}

.columns .st {
  color: #969798;
}

.columns .st h2,
.columns .st a {
  color: #fff;
}

.copy a {
  border-bottom: 1px solid #fff;
  -moz-transition: border-color 0.15s ease-in;
  -webkit-transition: border-color 0.15s ease-in;
}

.st .copy a {
  border-bottom-color: #2e3133;
}

.copy:hover a {
  border-bottom-color: #ccc;
}

.st .copy:hover a {
  border-bottom-color: #585859;
}

.copy a:hover,
.copy a:focus {
  border-bottom-color: #999;
}

.st .copy a:hover,
.st .copy a:focus {
  border-bottom-color: #8b8b8c;
}

.copy a:active {
  position: relative;
  top: 1px;
}

.part-left .st h2 {
  text-align: left;
}

.part-right .nd h2 {
  text-align: right;
}

/* 3. HEADER
•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */

.columns > header {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 20;
  min-width: 1000px;  
  color: #2e3133;  
  padding-top: 72px;
  padding-bottom: 36px;
}

.columns > header p,
.columns > header h1,
.columns > header h2 {
  height: 18px;
}

.columns > header p span,
.columns > header h1 span,
.columns > header h2 span {
  display: block;
  position: absolute;
}

.columns > header p span:first-child,
.columns > header h1 span:first-child,
.columns > header h2 span:first-child,
.columns > header p span.first,
.columns > header h1 span.first,
.columns > header h2 span.first {
  right: 50%;
  margin-right: 0.5ex;
  color: #fff;
}

.columns > header p span + span,
.columns > header h1 span + span,
.columns > header h2 strong + span,
.columns > header p span.last,
.columns > header h1 span.last,
.columns > header h2 span.last {
  left: 50%;
  margin-left: 0.5ex;
}

/* Hello, my name is */

.columns > header p {
  text-transform: lowercase;
  font-variant: small-caps;
  letter-spacing: 0.72em;
  font-size: 16px;
  height: 18px;
  margin-bottom: 18px;
}

.columns > header p span:first-child {
  margin-right: -0.5ex;
  -moz-transform: scale(0.85) translate(1ex, 0pt);
}

.columns > header p span + span {
   -moz-transform: scale(0.85) translate(-1ex, 0pt);
}

/* Piotr Petrus */

.columns > header h1 {
  font: italic normal 30px/36px "Minion Pro", "Minion Std", "Minion Web", "Palatino", "Times", serif;
  letter-spacing: 0.18em;
  height: 36px;
  margin-bottom: 18px;
}

/* Engineer & Designer */

.columns > header h2 {
  font: normal 36px/36px "SteinemBold", "Trebuchet MS", serif;
  height: 36px;
  margin-bottom: 18px;
}

.columns > header h2 em {
  font-style: normal;
  color: #676e73;
}

.columns > header h2 span {
  white-space: nowrap;
}

.columns > header h2 span:first-child,
.columns > header h2 span.first {
  text-shadow: rgba(0, 0, 0, 0.6) 0 1px 2px;
  padding-right: 34px;
  margin-right: 10px;
}

.columns > header h2 strong {
  position: absolute;
  left: 50%;
  margin-left: -34px;
  min-width: 68px;
  
  font-size: 48px;
  line-height: 36px;
  padding-top: 18px;
  padding-bottom: 14px;
  margin-top: -18px;
  
  font-family: "Minion Pro", "Minion Std", "Minion Web", "Palatino", "Times", serif;  
  font-style: italic;
  text-align: center;
  text-shadow: rgba(0, 0, 0, 0.6) 0 1px 2px;
  color: #fff;
  background: url("amp.png") 50% 50% no-repeat;  
}

.columns > header h2 strong + span,
.columns > header h2 span.last {
  text-shadow: rgba(255, 255, 255, 0.6) 0 1px 2px;
  padding: 5px 0 5px 34px;
  /* trim on animation */
  right: 0;
  margin-top: -5px;
  margin-left: 10px;
  overflow: hidden;
}

/* Visibility */

.invisible {
  opacity: 0.0;
}

/* Edge shadow */

.shadow {
  position: absolute;
  width: 40px;
  top: 0;
  height: 288px;
  z-index: 40;  
  background-image: url("tag-shaders.png");
  background-repeat: repeat-y;
}

.shadow-dev {
  left: 0;
}

.shadow-design {
  right: 0;
  background-position: -40px 0;
}

/*  =Tags
---------------------------------------------------------------------- */

.tags {
  position: absolute;
  padding: 4px 0;
  top: 252px;
  z-index: 40px;
  font-size: 18px;
}

.tags li {
  display: block;
  text-transform: lowercase;
  background-repeat: repeat-x;
  background-position: 0 100%;
  line-height: 28px;
  padding: 0 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.25) 0 1px 0;
  -moz-box-shadow: rgba(0, 0, 0, 0.25) 0 1px 0;
  box-shadow: rgba(0, 0, 0, 0.25) 0 1px 0;
}

.tags li span {
  display: block;
  padding: 0 6px;
}

.tags-dev {
  right: 0;
  text-align: right;
  white-space: nowrap;
  margin-right: -2ex;
}

.tags-dev ul {
  width: 2000px;
}

.tags-dev li {
  background-color: #4b5155;
  background-image: url("tag-dev.png");
  color: #fff;
  opacity: 0.5;
  float: right;
  margin-left: 6px;
}

.tags-dev li:first-child {
  background-color: #b52626;
  opacity: 1;
}

.tags-design {
  left: 0;
  width: 100%;
  overflow: hidden;
}

.tags-design ul {
  width: 2000px;
  padding-left: 2ex;
}

.tags-design li:first-child {
  margin-left: 6px;
}

.tags-design li {
  float: left;
  margin-right: 6px;
  line-height: 26px;
  padding: 0 0 1px;
  margin-top: 1px;
}

.tags-design li {
  background-color: #fff;
  background-image: url("tag-design.png");
  color: #4e4e4e;
  opacity: 0.5;
}

.tags-design li span {
  color: #4e4e4e;
  box-shadow: rgba(0, 0, 0, 0.08) 0 -1px 0;
  -moz-box-shadow: rgba(0, 0, 0, 0.08) 0 -1px 0;
  -webkit-box-shadow: rgba(0, 0, 0, 0.08) 0 -1px 0;
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
}

/* 4. PORTFOLIO
•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */

.works {
  padding-top: 18px;
}

section h2 span {
  display: none;
}

section h2 {
  font: italic normal 24px/36px "Minion Pro", "Minion Std", "Minion Web", "Palatino", "Times", serif;
  letter-spacing: 0.18em;
  margin-bottom: 18px;
}

.st section h2 {
  text-align: right;
  margin-right: -18px;
  padding-right: 0.5ex;
}

.nd section h2 {
  margin-left: -18px;
  padding-left: 0.5ex;
}

article {
  padding-bottom: 18px;
}

/* 3.1 =Description
---------------------------------------------------------------------- */

article header {
  font: bold 24px/36px "Steinem", "SteinemBold", "Trebuchet MS", serif;
  margin-top: 18px;
  position: relative;
}

article header a {
  font: bold 12px/16px "Helvetica Neue", Arial, sans-serif;
  text-transform: lowercase;
  color: #fff;
  background: #0681eb;
  background: -webkit-gradient(linear, left top, left bottom, from(#068cfa), to(#0676dc));
  background: -moz-linear-gradient(90deg, #068cfa, #0676dc);
  padding: 0 6px;
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  box-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px;
  -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px;
  text-shadow: rgba(0, 0, 0, 0.35) 0 1px 0;
  position: absolute;
  right: 0;
  top: 7px;
  color: #fff;
}

article header a:after {
  content: " →";
}

article dl:after {
  content: "";
  display: block;
  height: 0;
  overflow: hidden;
  clear: both;
}

article dl {
  font-size: 14px;
}

article dl dt {
  font-weight: bold;
  float: left;
  width: 81px;
  margin-bottom: 18px;
  clear: left;
}

article dl dt:after {
  content: "…";
  font: italic normal 14px/1 "Minion Pro", "Minion Std", "Minion Web", "Palatino", "Times", serif;
}

article dl dt em {
  font: italic normal 14px/1 "Minion Pro", "Minion Std", "Minion Web", "Palatino", "Times", serif;
  position: relative;
}

article dl dd {
  margin-left: 81px;
  margin-top: 18px;
  position: relative;
}

article dl dd abbr[title]:hover:after {
  opacity: 0.999;
}

article dl dd abbr[title]:after {
  content: attr(title);
  position: absolute;
  left: 0;
  opacity: 0;
  background-color: #464646;
}

/* 3.2 =Description Developer
---------------------------------------------------------------------- */

.st article header {
  text-shadow: rgba(0, 0, 0, 0.4) 0 1px 2px;
}

.st article dl {
  color: #969798;
}

.st article dl dt {
  color: #fff;
}

/* 3.3 =Description Designer
---------------------------------------------------------------------- */

.nd article dl {
  color: #666;
}

.nd article dl dt {
  color: #000;
  padding-left: 9px;
}

.nd article dl dd {
  margin-left: 90px;
  padding-right: 0;
}

.nd article header a {
  text-indent: 0;
}

/* 3.4 =Description JavaScript
---------------------------------------------------------------------- */

.js article {
  position: relative;
}

.js article div {
  position: absolute;
  width: 263px;  
  top: -3px;
  opacity: 0;
  display: none;  
  z-index: 60;  
  border: 2px solid #585a5c;
  background-color: #191b1c;
  padding: 13px 13px 18px;
  border-radius: 12px;
  -moz-border-radius: 12px;
  -webkit-border-radius: 12px;
}

.js .border-image article div {
  padding: 2px 2px 7px;
  border: 13px solid #000;
  background-color: transparent;
  border-image: url("popover-dev.png") 13 13 13 13 round round;
  -moz-border-image: url("popover-dev.png") 13 13 13 13 round round;
  -webkit-border-image: url("popover-dev.png") 13 13 13 13 round round;
}

.js .box-shadow article div {
  box-shadow: rgba(0, 0, 0, 0.4) 0 0 5px;
  -moz-box-shadow: rgba(0, 0, 0, 0.4) 0 0 5px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 0 5px;
}

.js article div.enabled {
  display: block;
}

.js article div > span {
  position: absolute;
  width: 26px;
  height: 39px;
  background: url("popover-arrow.png") no-repeat;
  right: -25px;
  top: 50%;
  margin-top: -20px;
}

.js .border-image article div > span {
  right: -35px;
}

.js .box-shadow article div > span {
  background-position: -26px 0;
}

.js article header {
  line-height: 24px;
  margin-top: 0;
  padding-top: 5px;
  padding-bottom: 13px;
  color: #fff;
}

.js article dl {
  margin-top: -18px;
}

.js article dl dt,
.js article dl dd {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 18px;
}

.js article dl dd {
  padding-right: 0;
}

.js .nd article div {
  border-color: #fff;
  background-color: #464646;
}

.js .border-image .nd article div {
  background-color: transparent;
  border-width: 13px;
  border-image: url("popover-design.png") 13 13 13 13 round round;
  -moz-border-image: url("popover-design.png") 13 13 13 13 round round;
  -webkit-border-image: url("popover-design.png") 13 13 13 13 round round;
}

.js .nd article div > span {
  background-image: url("popover-arrow.png");
  background-position: 0 -39px;
  right: auto;
  left: -25px;
}

.js .border-image .nd article div > span {
  left: -35px;
}

.js .box-shadow .nd article div > span {
  background-position: -26px -39px;
}

.js .nd article header,
.js .nd article dl dt {
  color: #fff;
}

.js .nd article header {
  text-indent: 0;
  text-shadow: rgba(0, 0, 0, 0.4) 0 1px 2px;
}

.js .nd article dl {
  color: #969798;
}

.js .nd article dl dt {
  padding-left: 0;
}

.js .nd article dl dd {
  margin-left: 81px;
}

/* 3.5 =Position
---------------------------------------------------------------------- */

.js .st article div {
  left: 0;
}

.js .nd article div {
  right: 0;
}

.js article dd {
  padding-right: 9px;
}

.nd article header {
  text-indent: 9px;
  text-shadow: rgba(255, 255, 255, 0.4) 0 1px 2px;
}

/* 3.6 =Thumbnail
---------------------------------------------------------------------- */

.works figure {
  position: relative;
  z-index: 60;
}

.works figure,
.js .works figure a {
  border: 6px solid #000;
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
}

.js .works figure {
  border: 0;
}

.works figure img,
.js .works figure a {
  display: block;
}

.js .nd .works figure a {
  border-color: #666;
}

/* Make images scalable */
.js .works figure img {
  display: block;
  width: 100%;
  background-color: #000;
}

.animation .works img,
.part-left .works img,
.part-right .works img {
  height: auto;
}

/* 3.7 =Thumbnail Hover
---------------------------------------------------------------------- */

.js .works figure a {
  outline: none;
}

.js .works figure a span {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin-left: 1px;
  margin-top: 1px;
  border: 6px solid #fdd300;
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  opacity: 0;
}

.js .border-image .works figure a span {
  top: -1px;
  right: -1px;
  bottom: -1px;
  left: -1px;
  margin-left: 0;
  margin-top: 0;
  border-width: 11px;
  border-image: url("selection.png") 11 11 11 11 round round;
  -moz-border-image: url("selection.png") 11 11 11 11 round round;
  -webkit-border-image: url("selection.png") 11 11 11 11 round round;
}

.js .works figure a:hover,
.js .works figure a:focus {
  -moz-transition: border-color 0.15s ease-in;
  -webkit-transition: border-color 0.15s ease-in;
}

.js .st .works figure a:hover,
.js .st .works figure a:focus {
  border-color: #2e3133;
}

.js .nd .works figure a:hover,
.js .nd .works figure a:focus {
  border-color: #fff;
}

.js .works figure a:hover span,
.js .works figure a:focus span {
  left: -1px;
  top: -1px;
  -moz-transition: opacity 0.15s ease-in;
  -webkit-transition: opacity 0.15s ease-in;
  opacity: 1;
}

/* 5. COPY
•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */

.contact h2 {
  text-transform: lowercase;
}

.contact h2:before {
  content: "& ";
}

.part-left .contact h2,
.part-right .contact h2 {
  text-transform: none;
}

.part-left .contact h2:before,
.part-right .contact h2:before {
  content: "";
}

.part-left .st .works h2 span,
.part-right .nd .works h2 span {
  display: inline;
}

.part-right .st .works h2,
.part-left .nd .works h2 {
  opacity: 0;
}

.animation .works h2 {
  white-space: nowrap;
  overflow: hidden;
}

/* 6. COMMANDS
•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */

body.baseline #master-header,
body.baseline .tags {
  background: url("baseline.png") !important;
}

body.baseline .columns .st .inner {
  background: url("baseline.png"), #2e3133 url("st.png") repeat-y 100% 0;
}

body.baseline .columns .nd,
body.baseline .columns .nd .inner {
  background: url("baseline.png"), #fff url("nd.png") repeat-y;
}

body.baseline .shadow {
  background: url("baseline.png"), url("tag-shaders.png") repeat-y;
}

body.baseline .shadow-design {
  background: url("baseline.png"), url("tag-shaders.png") repeat-y -40px 0;
}

span.zoomed {
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
  background: #000;
  background: rgba(0, 0, 0, 0.65); 
  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-weight: bold;
  line-height: 1em;
  letter-spacing: 0;
  text-align: center;
  color: #fff;
  z-index: 200;
}