/*
    TITLE   : Styles for luthornguyen.com 
    AUTHOR  : Luthor Nguyen
    VERSION : 1.0
*/

* {
    margin:0;
    padding:0}
article,aside,details,figcaption,.figure,footer,header,hgroup,nav,section {
    display:block}
[hidden] {
    display:none}
.back_top {
    background:transparent none;
    color:transparent;
    display:none;
    opacity:0}
::-moz-selection {
    background:#f56906;
    color:#fefff8;
    text-shadow:none}
::selection {
    background:#f56906;
    color:#fefff8;
    text-shadow:none}
img::selection {
    background:transparent}
img::-moz-selection {
    background:transparent}
.cssmask h1::selection {
    -webkit-text-stroke:1px #fefff8;
    background:#4b4c46;
    color:transparent}
.cssmask .sub h1::selection {
    background:#f56906;
    color:#fefff8;
    -webkit-text-stroke:0}
::selection:window-inactive,.cssmask h1::selection:window-inactive {
    background:#c8c9c2;
    color:#4b4c46}
@-webkit-keyframes arrow {
    0% {
    background-position:50% 0px}
100% {
    background-position:50% 31px}
}
@-webkit-keyframes arrow_largescale {
    0% {
    background-position:50% 0px}
100% {
    background-position:50% 38px}
}
.preload * {
    -webkit-transition:none !important;
    -moz-transition:none !important;
    -o-transition:none !important;
    transition:none !important}
html,body {
    height:100%}
.pushwrapper {
    min-height:100%;
    height:auto !important;
    height:100%;
    margin:0 auto -5.5em}
html {
    -webkit-text-size-adjust:100%;
    -ms-text-size-adjust:100%;
    text-size-adjust:100%;
    background:#fefff8;
    overflow-y:scroll}
body {
    font:100%/1.4 "PTSansRegular-custom","Helvetica Neue",Helvetica,Arial,sans-serif;
    background-color:transparent;
    color:#4b4c46;
    min-width:224px;
    margin:0 auto;
    padding:0;
    width:100%}
select {
    font-family:"Helvetica Neue",Helvetica,Calibri,Arial,sans-serif;
    color:#24201a}
.wrapper {
    max-width:600px;
    margin-left:auto;
    margin-right:auto}
h1,h2,h3,h4,h5,h6 {
    font-family:"TrumpGothicEastBold-custom","Arial Narrow",Impact,Calibri,Arial,sans-serif;
    font-weight:normal;
    color:#24201a}
h1 {
    font:3.8em/0.82 "MochaMattari-custom","Helvetica Neue",Helvetica,Calibri,Arial,sans-serif;
    text-shadow:1px 1px 0 rgba(210,90,5,0.3);
    -webkit-transition:font-size 0.3s ease;
    -moz-transition:font-size 0.3s ease;
    -webkit-font-smoothing:antialiased;
    color:#f5f6ef;
    letter-spacing:0.02em;
    margin:0 auto 0.26em;
    position:relative;
    text-align:center;
    display:block}
h1:after {
    position:absolute;
    margin-left:-0.04em;
    content:"."}
.oldie h1:after {
    content:""}
.cssmask h1 {
    -webkit-mask-image:url('/img/mask_packed_v2.png')}
.symbian3 h1,.cssmask .sub h1 {
    -webkit-mask-image:none}
.no-fontface h1,.symbian3 h1,.winphone h1 {
    font:3em/1 "Helvetica Neue",Helvetica,Calibri,Arial,sans-serif;
    text-transform:uppercase;
    margin-bottom:.4em;
    letter-spacing:0}
.ie7 h1 {
    margin-bottom:17px}
.sub h1 {
    font:3.9em/1.2 "MochaMattari-custom","Helvetica Neue",Helvetica,Calibri,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
    color:#24201a;
    letter-spacing:-1px;
    text-align:center;
    margin:0 0 0.18em;
    text-shadow:none;
    width:100%}
.sub h1:after {
    content:""}
.winphone .sub h1,.symbian3 .sub h1 {
    font:3em/1 "Helvetica Neue",Helvetica,Calibri,Arial,sans-serif;
    letter-spacing:0}
h2 {
    font:0.9375em/1.2 "PTSansRegular-custom","Helvetica Neue",Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:subpixel-antialiased;
    color:#f8f9f2;
    text-align:center;
    max-width:90%;
    margin:0 auto}
.sub h2 {
    font:1.25em/1.3 "TrumpGothicEastMedium-custom","Arial Narrow",Impact,Calibri,Arial,sans-serif;
    text-transform:uppercase;
    color:#5d5f57;
    letter-spacing:.5px;
    margin-bottom:1em;
    max-width:100%}
.no-fontface .sub h2,.winphone .sub h2,.symbian3 .sub h2 {
    text-transform:none;
    letter-spacing:0}
.no-js h2 {
    margin-bottom:1.75em}
.desc h2,h3,h4 {
    font:1.45em/1.3 "TrumpGothicEastMedium-custom","Arial Narrow",Impact,Calibri,Arial,sans-serif;
    text-transform:uppercase;
    color:#24201a;
    letter-spacing:1px;
    margin-bottom:.3em;
    text-align:left}
h4 {
    font:1.25em/1.3 "TrumpGothicEastBold-custom","Arial Narrow",Impact,Calibri,Arial,sans-serif}
.no-fontface .desc h2,.no-fontface h3,.winphone .desc h2,.winphone h3,.symbian3 .desc h2,.symbian3 h3 {
    text-transform:none;
    letter-spacing:0}
.entry h3,.entry h4 {
    margin:1.2em 0 0.4em}
.desc h2 {
    font-size:2em}
p,ol,ul,ol {
    margin-bottom:.5em;
    font-size:1em}
p {
    text-align:left;
    font-size:.9375em;
    -webkit-hyphens:auto;
    -webkit-hyphenate-character:"\2010";
    -webkit-hyphenate-limit-after:1;
    -webkit-hyphenate-limit-before:3;
    -moz-hyphens:auto;
    hyphens:auto}
ul,ol {
    margin:0 0 1.5em -24px;
    padding:0 0 0 24px}
li ul,li ol {
    margin:0;
    font-size:1em}
.entry article ul,.entry article ol {
    font-size:.9375em;
    margin-left:0px;
    list-style-type:square}
.entry article ul li,.entry article ol li {
    margin-bottom:1px}
.entry article ol {
    margin-left:5px;
    list-style-type:decimal}
blockquote {
    font:italic 0.875em/20px Georgia,"Times New Roman",Times,serif;
    background:transparent url('/img/quote.png') no-repeat;
    margin:0 0 1.5em 0;
    padding-left:38px}
blockquote:before,blockquote:after {
    content:'';
    content:none}
#main blockquote p {
    margin-bottom:8px}
abbr[title] {
    border-bottom:1px dotted;
    cursor:help}
b,strong {
    font-weight:bold}
del {
    text-decoration:line-through}
article p b,article p strong,article ul strong,article ol strong,article ul b,article ol b {
    font-family:"PTSansBold-custom","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight:normal}
pre,code {
    font:0.875em/1.4 monospace,monospace}
pre {
    -webkit-font-smoothing:subpixel-antialiased;
    background:#f5f6ef;
    padding:20px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    -ms-border-radius:5px;
    -o-border-radius:5px;
    border-radius:5px;
    white-space:pre;
    white-space:pre-wrap;
    word-wrap:break-word;
    margin:20px 0 22px;
    color:#41413c}
em,i {
    font-style:italic;
    font-weight:normal}
sub,sup {
    vertical-align:baseline;
    position:relative;
    font-size:65%;
    line-height:0}
sub {
    bottom:-0.25em}
sup {
    top:-0.5em}
table {
    width:100%;
    margin-bottom:4em;
    border-collapse:collapse;
    border-spacing:0;
    font-size:100%}
table th {
    font-weight:normal;
    text-align:left;
    font-family:"PTSansBold-custom","Helvetica Neue",Helvetica,Arial,sans-serif}
table th,table td {
    border-bottom:1px solid #d6d7d4;
    padding:5px 0}
table tr:last-child td {
    border-bottom:0}
a,a:visited {
    text-decoration:none;
    color:#d25a05}
a:hover,a:active {
    outline:0}
a:hover {
    text-decoration:underline}
a:active,a:focus {
    -webkit-transition:none;
    -moz-transition:none;
    -o-transition:none;
    transition:none;
    opacity:.7}
h1 a,h2 a,h3 a {
    -webkit-transition:none;
    -moz-transition:none;
    -o-transition:none;
    transition:none}
h2 a,h2 a:visited {
    font-family:"PTSansBold-custom","Helvetica Neue",Helvetica,Arial,sans-serif;
    text-decoration:none;
    color:#24201a;
    white-space:nowrap}
.sub h2 a,.sub h2 a:visited {
    font-family:"TrumpGothicEastMedium-custom","Arial Narrow",Impact,Calibri,Arial,sans-serif}
h2 a:hover,h2 a:active {
    text-decoration:none;
    color:#060605;
    opacity:1.0}
table a,table a:visited,p a,p a:visited,.entry article ul a,.entry article ul a:visited {
    border-bottom:1px solid #cccdc9;
    background:#edeee7;
    -webkit-transition:all 0.1s ease-in;
    -moz-transition:all 0.1s ease-in;
    transition:all 0.1s ease-in;
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    -ms-border-radius:2px;
    -o-border-radius:2px;
    border-radius:2px;
    text-decoration:none;
    padding:1px 3px 0;
    color:#4b4c46}
table a:hover,p a:hover,.entry article ul a:hover {
    border-bottom:1px solid #9b9c94;
    background:transparent;
    color:#0c0b09;
    text-decoration:none;
    -webkit-border-radius:0;
    -moz-border-radius:0;
    -ms-border-radius:0;
    -o-border-radius:0;
    border-radius:0}
.readmore {
    -webkit-transition:padding 0.2s ease-in;
    -moz-transition:padding 0.2s ease-in;
    transition:padding 0.2s ease-in;
    background-position:right 4px}
.readmore:hover {
    background:transparent url('/img/arrow_red_v2.png') no-repeat right 4px;
    padding-right:20px}
.sub article .readmore {
    margin-top:-0.3em;
    display:block;
    float:left}
footer a,footer a:visited {
    background:transparent;
    color:#8c8e84;
    padding:0;
    border:0}
footer a:hover {
    color:#24201a}
sup a,sup a:hover {
    background:transparent;
    border:0}
img {
    -ms-interpolation-mode:bicubic;
    background:transparent;
    border:0}
#main img {
    height:auto;
    width:100%}
iframe {
    max-width:100%;
    margin-bottom:1.2em}
.video-container {
    position:relative;
    padding-bottom:56.25%;
    padding-top:30px;
    height:0;
    overflow:hidden}
.video-container iframe,.video-container object,.video-container embed {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%}
.img a:active,.img a:focus {
    opacity:1.0;
    -webkit-transition:none;
    -moz-transition:none;
    -o-transition:none;
    transition:none}
.project img,.entry article img {
    margin-bottom:1em;
    max-width:840px}
.oldie .project img {
    border:1px solid #8c8e84}
.project .nofx,.oldie .project .nofx,.entry article img {
    -webkit-box-shadow:none;
    -moz-box-shadow:none;
    box-shadow:none;
    border:0}
.ie7 select {
    vertical-align:middle}
select {
    vertical-align:baseline;
    font-size:100%}
header {
    background:#d25a05 url('/img/backgrounds/orange.jpg') repeat -100% -100%;
    font-family:sans-serif;
    padding:34px 0 0;
    z-index:9}
.sub header {
    background:transparent none}
header .wrapper,header .figure {
    position:relative;
    z-index:20}
.figure {
    -webkit-transition:all 0.3s ease;
    -moz-transition:all 0.3s ease;
    transition:all 0.3s ease;
    width:100%}
.figure a {
    color:#fefff8;
    margin:0 auto 25px;
    display:block;
    height:auto;
    float:none;
    width:88px}
.sub .figure a {
    color:#24201a}
.figure img {
    width:88px;
    height:88px}
nav {
    background:#24201a url('/img/backgrounds/darkbrown.jpg') repeat 150% 0;
    -webkit-transition:padding 0.3s ease;
    -moz-transition:padding 0.3s ease;
    transition:padding 0.3s ease;
    font-family:sans-serif;
    text-align:right;
    padding:7px 0;
    z-index:10;
    width:100%}
.no-js nav,.s60 nav {
    text-align:center}
nav ul {
    margin:0 auto;
    display:none;
    padding:0}
.no-js nav ul,.s60 nav ul {
    display:block}
nav li {
    display:inline}
nav li:last-child {
    display:none}
nav a:link,nav a:visited,nav a:hover {
    color:#f8f9f2;
    text-decoration:none;
    padding:12px 10px;
    font-size:.8125em}
.no-js nav .active a,.no-js nav .active a:visited,.no-js nav .active a:hover,.s60 nav .active a,.s60 nav .active a:visited,.s60 nav .active a:hover {
    background:#d25a05 url('/img/backgrounds/orange.jpg') repeat -100% 0}
.no-js .sub nav .active a,.no-js .sub nav .active a:visited,.no-js .sub nav .active a:hover,.s60 .sub nav .active a,.s60 .sub nav .active a:visited,.s60 .sub nav .active a:hover {
    background:#fefff8 none;
    color:#24201a}
nav select {
    font-size:.8125em;
    margin-right:10px;
    width:45%}
.s60 nav select {
    display:none}
#main {
    padding:34px 7% 0.5em;
    position:relative;
    overflow:hidden}
.sub #main {
    -webkit-font-smoothing:antialiased;
    margin-top:-10px;
    padding-top:0}
section {
    margin-bottom:2em}
.sub section {
    margin-bottom:0}
section p {
    -webkit-font-smoothing:antialiased}
.sub section p {
    margin-bottom:1.2em}
.sub .project p {
    margin-bottom:0}
.sub .project p+p {
    margin-bottom:1.2em;
    text-indent:1.5em}
footer {
    font:0.6875em/1.6 Arial,Helvetica,"Helvetica Neue",sans-serif;
    -webkit-font-smoothing:antialiased;
    color:#8c8e84;
    padding:0 7% 40px;
    overflow:hidden}
.symbian3 footer {
    display:none}
footer p {
    max-width:260px;
    float:left}
.sub footer {
    padding-bottom:0 !important;
    margin-top:1em;
    height:4em}
.twitter,.dribbble {
    -webkit-transition:opacity 0.2s ease-in;
    -moz-transition:opacity 0.2s ease-in;
    transition:opacity 0.2s ease-in;
    background:transparent url('../images/social_v2.png') no-repeat 0 0;
    text-indent:-9999px;
    overflow:hidden;
    margin-top:3px;
    display:block;
    float:right;
    width:27px;
    height:27px}
.dribbble {
    background-position:-34px 0;
    margin-left:6px}
.twitter:hover,.dribbble:hover {
    opacity:.7}
.push {
    height:6em}
#swipe {
    position:relative;
    padding:0 0 51px;
    margin-left:0;
    width:100%;
    z-index:1}
.no-js #swipe {
    padding:0 0 27px}
#swipe .wrapper {
    margin:0 auto;
    width:90%}
#main .project {
    margin-bottom:1em}
.project ul {
    list-style:none}
.desc {
    border-top:1px solid #24201a;
    margin-bottom:1em;
    padding-top:2em;
    overflow:hidden}
.project .desc h2 {
    margin-bottom:.2em}
.oldie .project .desc h2 {
    margin-bottom:.1em}
.first h2 {
    display:none}
.first .desc {
    padding-top:0;
    border:0}
.blog h1 {
    margin-bottom:.5em}
.sub .articles {
    overflow:hidden;
    margin-top:1em;
    width:100%}
.entry .articles {
    margin-top:0}
article {
    margin:0 0 2.5em;
    padding-top:1px;
    overflow:hidden;
    float:left;
    width:100%}
.entry article,article:last-child {
    margin-bottom:0}
.blog article p,.entry article img {
    margin-bottom:1.2em}
.entry article img {
    width:98% !important}
article h3 {
    font:2em/1 "TrumpGothicEastMedium-custom","Arial Narrow",Impact,Calibri,Arial,sans-serif;
    margin-bottom:0}
.entry article h3 {
    font-size:1.45em;
    line-height:1.3}
article h3 a,article h3 a:visited,article h1 a,article h1 a:visited {
    color:#24201a}
.sub article .byline {
    margin:0.4em 0 1.4em;
    font-size:.6875em;
    display:block}
aside {
    text-shadow:0 1px 1px rgba(254,255,248,0.7);
    background:#f5f6ef;
    padding:1.8em 1.5em 1.5em;
    -webkit-border-radius:6px;
    -moz-border-radius:6px;
    -ms-border-radius:6px;
    -o-border-radius:6px;
    border-radius:6px;
    line-height:1.25em;
    font-size:.75em;
    margin-top:3em;
    float:left}
aside p {
    margin-top:.2em}
aside a,aside a:visited {
    color:#24201a}
#main aside img {
    margin:0 1em 0.5em 0;
    float:left;
    width:38%}
.ie6 aside {
    overflow:hidden;
    float:none}
.entry h1 {
    font:2em/1 "TrumpGothicEastMedium-custom","Arial Narrow",Impact,Calibri,Arial,sans-serif;
    text-transform:uppercase;
    margin:0.3em 0 0.1em;
    letter-spacing:1px;
    text-align:left}
.no-fontface .entry h1,.winphone .entry h1,.symbian3 .entry h1 {
    text-transform:none;
    letter-spacing:0;
    font-size:2em}
.entry h1 a,.entry h1 a:hover {
    text-decoration:none;
    color:#24201a}
.backto,.forwardto {
    margin-top:.5em;
    display:block;
    float:left}
.forwardto {
    float:right}
.archive h2 {
    font:2em/1 "TrumpGothicEastMedium-custom","Arial Narrow",Impact,Calibri,Arial,sans-serif;
    text-align:left}
.archive h3 {
    font-size:1.5em}
.archive article {
    margin:0 0 1em}
.error h1 {
    margin-bottom:0;
    text-align:center}
.error h2 {
    margin:0 0 2em}
.error #main img {
    margin-bottom:1em}
.com {
    color:#7f8177}
.lit {
    color:#8e5325}
.pun {
    color:#9d9383}
.opn,.clo,.fun {
    color:#928374}
.str,.atv {
    color:#9b6031}
.typ,.atn,.dec,.var {
    color:#928374}
.entry article .gallery {
    list-style:none;
    padding:0;
    float:left}
.entry article .gallery a,.entry article .gallery a:hover {
    background:transparent;
    display:block;
    border:0}
.entry article .gallery li {
    margin:0 1% 0 0;
    float:left;
    width:31%}
.entry article .gallery img {
    margin:0 0 0.3em}
@media print {
    * {
    background:transparent !important;
    text-shadow:none !important;
    color:#000 !important;
    font-family:sans-serif !important;
    text-transform:none !important;
    letter-spacing:0 !important;
    -webkit-mask-image:none !important}
@page {
    margin:.5cm}
nav,footer,h2 .next,.readmore,.backto,.forwardto,.byline {
    display:none !important}
#swipe {
    padding:0}
#swipe h2 {
    text-align:center;
    margin-top:10px;
    font-size:16px}
header {
    padding:50px 0 0;
    height:auto;
    margin:0}
.sub h1,.sub h2 {
    color:black;
    text-align:left;
    padding-left:0;
    margin-left:0;
    display:block}
#main,article,.sub .articles {
    overflow:visible !important;
    float:none !important;
    margin-bottom:1em}
.sub h1 {
    margin-bottom:20px;
    line-height:36px;
    font-weight:bold;
    font-size:30px}
h2,h2 a {
    font:18px/26px sans-serif !important;
    text-transform:none;
    letter-spacing:1px;
    margin-bottom:.3em;
    margin-left:.5cm;
    text-align:left;
    width:auto}
h2,h3 {
    page-break-after:avoid;
    orphans:3;
    widows:3}
.project h2,article h2,article h3 {
    margin-top:1cm;
    font-size:18px;
    line-height:26px;
    text-transform:none}
p {
    font-size:11px;
    orphans:3;
    widows:3}
ul li {
    font-size:11px}
pre,blockquote {
    page-break-inside:avoid;
    border:1px solid #999;
    line-height:16px;
    margin:30px 0;
    padding:10px}
.img img,.img .nofx {
    border:1px solid #999;
    width:80%}
abbr[title]:after {
    content:" (" attr(title) ")"}
a,a:visited {
    text-decoration:none;
    color:#444}
a[href]:after {
    content:" (" attr(href) ")"}
a[href^="javascript:"]:after,a[href^="#"]:after,h1 a[href]:after {
    content:""}
.figure a[href]:after {
    content:""}
img {
    max-width:100%;
    page-break-inside:avoid}
}
@media screen and (min-width:380px) {
    h1 {
    font-size:4.6em}
}
@media screen and (min-width:540px) {
    aside {
    font-size:.875em;
    line-height:1.4}
aside p {
    margin-top:.3em}
#main aside img {
    width:30%}
.entry article .gallery li {
    margin:0 1% 0 0;
    width:24%}
}
@media screen and (min-width:610px) {
    .pushwrapper {
    margin:0 auto -9em}
.push {
    height:9em}
.border {
    background:#24201a url('/img/backgrounds/darkbrown.jpg') repeat -100% 0;
    width:100%;
    height:7px}
.ie6 .border {
    margin-top:-13px}
header,nav,#main,footer {
    padding-left:0px;
    padding-right:0px}
.sub header {
    height:120px}
.wrapper,.figure {
    position:relative;
    max-width:none;
    margin:0 auto;
    display:block}
.wrapper,.figure {
    width:88%}
h1 {
    text-shadow:-1px 0 0 #f5f6ef,2px 2px 1px rgba(36,32,26,0.06);
    margin:110px auto 20px;
    font-size:8.4em}
.no-fontface h1 {
    font-size:5em !important}
.sub h1 {
    text-shadow:none;
    text-align:left;
    font-size:6em;
    width:100%;
    margin:0}
h2 {
    font:normal 1.45em/1.5em "TrumpGothicEastRegular-custom","Arial Narrow",Impact,Calibri,Arial,sans-serif;
    text-transform:uppercase;
    letter-spacing:1px;
    margin-bottom:15px;
    width:70%}
.symbian3 h2,.no-fontface h2,.winphone h2 {
    text-transform:none;
    letter-spacing:0}
.sub h2 {
    font:1.45em/1.4 "TrumpGothicEastRegular-custom","Arial Narrow",Impact,Calibri,Arial,sans-serif;
    letter-spacing:1px;
    margin:0 0 1.4em;
    text-align:left;
    width:100%}
.symbian3 h2 {
    font-size:1em}
h2 a,h2 a:visited {
    font:normal 1em/1 "TrumpGothicEastBold-custom","Arial Narrow",Impact,Calibri,Arial,sans-serif;
    letter-spacing:0}
h2 a span {
    position:relative;
    text-decoration:none;
    top:-2px}
h3 {
    margin-bottom:.5em}
p {
    margin-bottom:.8em}
pre {
    max-width:93%}
header {
    padding:25px 0 0}
.figure a {
    position:absolute;
    margin:0;
    top:-5px;
    left:0}
.figure img {
    width:77px;
    height:77px}
nav li:last-child {
    display:block}
nav {
    background:transparent none;
    position:absolute;
    margin-top:18px;
    margin-right:0;
    padding:0;
    top:32px;
    right:0}
.ie7 nav {
    top:30px}
nav select {
    display:none}
nav ul {
    font:1.3575em/1.4 "TrumpGothicEastRegular-custom","Arial Narrow",Impact,Calibri,Arial,sans-serif;
    text-transform:uppercase;
    list-style:none;
    margin-right:0;
    display:block;
    float:right}
.symbian3 nav ul {
    font-size:1em}
.symbian3 nav ul,.no-fontface nav ul,.winphone nav ul {
    text-transform:none;
    letter-spacing:0}
nav li {
    margin-left:8px;
    display:block;
    float:left;
    padding:0}
nav a:link,nav a:hover,nav a:visited {
    -webkit-transition:background 0.2s ease-in;
    -moz-transition:background 0.2s ease-in;
    transition:background 0.2s ease-in;
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    -ms-border-radius:2px;
    -o-border-radius:2px;
    border-radius:2px;
    color:#fefff8;
    padding:10px 13px 6px;
    text-decoration:none;
    letter-spacing:1.6px;
    font-size:1em}
nav a:hover {
    text-shadow:0 2px 1px rgba(36,32,26,0.2);
    background:rgba(36,32,26,0.3)}
nav .active a:active {
    opacity:1.0}
nav .active a,nav .active a:visited,nav .active a:hover,.no-js nav .active a,.no-js nav .active a:visited,.no-js nav .active a:hover,.no-js .sub nav .active a,.no-js .sub nav .active a:visited,.no-js .sub nav .active a:hover {
    background:#24201a url('../images/darkbrown.jpg') repeat;
    color:#fefff8}
nav .active {
    background:transparent url('../images/arrow.png') no-repeat 50% 31px;
    -webkit-background-size:23px 24px;
    -moz-background-size:23px 24px;
    -o-background-size:23px 24px;
    background-size:23px 24px;
    -webkit-animation-timing-function:ease-in-out;
    -webkit-animation-iteration-count:1;
    -webkit-animation-duration:.5s;
    -webkit-animation-name:arrow;
    -webkit-transition:all 0.2s ease-in-out;
    -moz-transition:all 0.2s ease-in-out;
    transition:all 0.2s ease-in-out;
    padding-bottom:31px;
    margin:0 0 0 8px}
.ie6 nav .active {
    background:transparent none}
.sub nav a,.sub nav a:hover,.sub nav a:visited {
    color:#24201a}
.sub nav .active a,.sub nav .active a:hover {
    color:#fefff8 !important}
.sub nav a:hover {
    text-shadow:none}
#main {
    padding-top:43px}
section {
    margin-right:4%;
    width:30%;
    float:left}
.sub section {
    width:47%}
section.last,.sub section.last {
    margin-right:0}
section p,.entry article ul {
    font-size:.875em}
.sub section p {
    margin-bottom:0}
.blog article p {
    margin-bottom:1em}
.sub p+p {
    text-indent:1.5em}
.sub article p+p {
    text-indent:0}
.sub .project p+p {
    margin-bottom:0}
.sub section .dropcap {
    font:52px "TrumpGothicEastBold-custom","Arial Narrow",Impact,Calibri,Arial,sans-serif;
    text-transform:uppercase;
    margin:0.2em 0.2em 0 0;
    color:#43443f;
    letter-spacing:0;
    line-height:38px;
    float:left}
footer {
    margin-top:3em}
.sub footer {
    margin-top:5.4em}
#main .project {
    width:100%}
.desc h2 {
    font:2em/1.3 "TrumpGothicEastMedium-custom","Arial Narrow",Impact,Calibri,Arial,sans-serif}
.first .desc {
    margin-top:-1.2em}
.desc {
    margin-bottom:2em}
.blog h1 {
    margin-bottom:.3em}
.entry h1 {
    line-height:1em;
    margin:1em 0 0;
    font-size:3em}
.sub article h3 {
    line-height:1.2em;
    margin-bottom:0;
    font-size:2em}
.entry article h3 {
    line-height:1.3}
.sub article .byline {
    font-size:.75em}
.entry article .byline {
    margin-bottom:2.5em}
blockquote {
    font-size:.9375em;
    padding-left:45px}
.entry article h3 {
    margin:1em 0 0.2em;
    font-size:1.45em}
.sub .articles {
    margin-top:2.5em}
.entry .articles {
    margin-top:0}
.archive .articles {
    margin-top:1em}
.error h1 {
    text-align:center;
    margin-bottom:0}
.error h2 {
    text-align:center;
    line-height:1em;
    margin:0 0 2em;
    width:auto}
.error #main img {
    margin-bottom:1em}
aside {
    padding:1.3em 2em 1em}
aside p {
    margin-top:.6em}
.blog article .byline {
    margin:0 0 1.4em;
    font-size:.75em}
.entry article .byline {
    margin:0 0 3em}
.blog article h3 {
    font-size:2.5em}
.blog section p,.entry article ul {
    font-size:1em}
.entry article h3 {
    margin:1.75em 0 0.4em;
    font-size:1.75em}
.entry section .dropcap {
    line-height:48px;
    font-size:62px}
.entry #main h1 {
    margin:1em 0 0.1em;
    font-size:4em}
.projects section p {
    font-size:1em;
    display:inline}
.project.first {
    margin-top:1em}
.ie6 .first .desc {
    margin-top:0}
.entry article .gallery li {
    margin:0 1% 0 0;
    width:19%}
}
@media screen and (min-width:715px) and (max-width:740px) {
    h2 {
    width:75%}
.sub h2 {
    width:100%}
}
@media screen and (min-width:610px) and (max-width:714px) {
    h1 {
    font-size:7em}
h2 {
    width:88%}
.sub h2 {
    width:100%}
}
@media screen and (min-width:450px) and (max-width:609px) {
    h1 {
    margin:0 auto 0.18em;
    font-size:5.6em}
h2 {
    width:70%}
.sub h2 {
    width:100%}
}
@media screen and (min-width:490px) and (max-width:609px) {
    h1 {
    font-size:6.5em}
}
@media screen and (min-width:370px) and (max-width:450px) {
    h1 {
    font-size:4.6em}
}
@media screen and (min-width:740px) {
    .wrapper,.figure {
    width:650px;
    padding:0}
#swipe .wrapper {
    width:648px}
.figure a {
    left:0}
section {
    margin-right:25px;
    width:200px}
.ie7 section {
    width:190px}
.sub section {
    width:300px}
.project img {
    margin-bottom:2em}
h2 {
    width:75%}
.sub h2 {
    width:90%}
.entry h1 {
    font-size:3.375em}
.error h2 {
    line-height:1em;
    width:auto}
aside p {
    margin-top:2em}
}
@media screen and (min-width:1000px) {
    .projects #main {
    background:url('../images/up.png') no-repeat -9999px -9999px}
.back_top {
    background:rgba(36,32,26,0.25) url('../images/up.png') no-repeat 50% 50%;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    -ms-border-radius:5px;
    -o-border-radius:5px;
    border-radius:5px;
    -webkit-transition:none;
    -moz-transition:none;
    -o-transition:none;
    transition:none;
    filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity:0;
    position:fixed;
    display:block;
    bottom:50px;
    right:50px;
    height:50px;
    width:50px}
.back_top:hover {
    background:rgba(36,32,26,0.35) url('../images/up.png') no-repeat 50% 50%}
.back_top:active {
    background-color:rgba(36,32,26,0.45)}
.oldie .back_top {
    display:none}
.wrapper,.figure,.oldie .wrapper {
    width:940px}
.figure a {
    top:6px}
.figure img {
    width:76px;
    height:76px;
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    -ms-border-radius:2px;
    -o-border-radius:2px;
    border-radius:2px;}
#swipe {
    padding-top:0}
h1 {
    margin:128px auto 26px;
    letter-spacing:0.03em;
    font-size:10em;
    padding:0}
.no-fontface h1,.winphone h1 {
    font-size:6em !important}
.sub h1 {
    letter-spacing:0;
    font-size:8em}
h2,h3 {
    margin-bottom:25px;
    line-height:1.5em;
    font-size:1.75em;
    width:610px}
h2 a span {
    top:-3px}
.sub h2 {
    font-size:20px;
    width:780px}
h3 {
    margin-bottom:7px;
    width:auto}
section p,.entry article ul {
    margin-bottom:.9em;
    font-size:1em}
.project.first {
    margin-top:0}
.projects section p {
    display:block}
.figure a {
    margin:-12px 0 0 10px}
nav {
    right:10px;
    top:34px}
nav ul {
    font-size:18px}
nav .active {
    -webkit-background-size:28px 29px;
    -moz-background-size:28px 29px;
    -o-background-size:28px 29px;
    background-size:28px 29px}
#main {
    padding-top:45px}
#main form {
    width:620px;
    float:left}
.complementary {
    margin-top:15px;
    display:block;
    float:right}
section {
    width:294px}
.ie7 section {
    width:294px}
.sub section {
    margin-right:40px;
    width:450px}
.sub section.last {
    margin-right:0}
.sub section .dropcap {
    line-height:48px;
    font-size:62px}
footer {
    margin-top:3.4em}
.sub footer {
    margin-top:5.4em}
#main .img {
    margin-bottom:5em;
    width:550px;
    float:left}
.desc {
    font-size:.875em;
    float:right;
    width:320px}
.project img {
    margin-bottom:4em}
.first .desc {
    border-top:1px solid #24201a;
    padding-top:2em;
    margin-top:0}
.first h2 {
    display:block}
.blog #main h1 {
    margin-bottom:.2em}
.entry #main h1 {
    margin:1em 0 0.1em;
    font-size:4em}
.entry #main .byline {
    margin-bottom:3em}
.sub .articles {
    margin-top:3.5em;
    width:630px}
.entry .articles {
    margin-top:0}
.archive .articles {
    margin-top:1em}
article {
    margin:0 0 2.5em 0}
.sub article h3 {
    font-size:2.5em}
.entry article h3 {
    font-size:1.75em}
.push_aside {
    width:100%;
    height:4.1em;
    width:200px;
    float:right}
aside {
    background:transparent;
    margin-right:50px;
    margin-top:10.5em;
    line-height:18px;
    overflow:hidden;
    font-size:13px;
    display:block;
    float:right;
    width:200px;
    padding:0;
    border:0}
aside p {
    margin-top:0}
#main aside img {
    margin-bottom:1em;
    float:none;
    width:100%}
.entry aside {
    margin-top:14em}
.archive aside {
    margin-top:1.5em}
.ie6 .entry aside,.ie7 .entry aside {
    margin-top:12em}
aside img {
    margin-bottom:1em}
aside a,aside a:visited,aside a:hover {
    text-decoration:underline;
    white-space:nowrap;
    background:none;
    padding:0;
    border:0}
blockquote {
    font-size:.875em}
.sub article .byline {
    margin:0 0 1.4em;
    font-size:.75em}
.error h2 {
    line-height:1em;
    width:auto}
}
@media screen and (min-width:1580px) {
    body {
    font-size:106.25%}
.ie6 .border {
    margin-top:-15px}
.wrapper,.figure,.oldie .wrapper {
    width:1140px}
.sub header {
    height:140px}
#swipe {
    padding:0 0 41px}
#swipe .wrapper {
    width:1138px}
nav {
    font-size:1.1em;
    top:45px}
nav .active {
    -webkit-animation-name:arrow_largescale;
    background-position:50% 38px}
h1 {
    margin:158px auto 32px;
    letter-spacing:0.02em;
    font-size:11.8em}
.sub h1 {
    font-size:10em;
    margin:0}
.entry h1 {
    font-size:5em}
h2,h3 {
    margin-bottom:1.5em;
    font-size:2em;
    width:680px}
.sub h2 {
    font-size:1.5em;
    width:900px}
section {
    margin-right:45px;
    width:350px}
.sub section {
    width:535px}
section p {
    line-height:1.5em}
.ie7 section {
    margin-right:35px;
    width:340px}
.ie7 .sub section {
    width:535px}
h3 {
    margin-bottom:7px;
    width:auto}
.figure a {
    margin-top:-5px}
.ie7 .figure a {
    top:12px}
.figure img {
    width:98px;
    height:98px}
#main {
    padding-top:58px}
#main .img {
    width:840px}
#main .desc {
    width:250px}
#main .desc p {
    line-height:1.6em}
#main form {
    width:760px}
.sub .articles,.ie7 .sub .articles {
    width:760px}
aside {
    margin-top:11em;
    width:250px}
.entry aside {
    margin-top:15em}
.ie6 .entry aside,.ie7 .entry aside {
    margin-top:12em}
.error h2 {
    line-height:1em;
    width:auto}
pre {
    padding:24px;
    margin:24px 0}
}
@media screen and (device-width:768px) {
    a:link,a:visited,a:active,a:focus,#main #submit {
    -webkit-transition:none !important;
    -moz-transition:none !important;
    -o-transition:none !important;
    transition:none !important;
    opacity:1 !important}
h1 {
    -webkit-transition:none;
    -moz-transition:none;
    -o-transition:none;
    transition:none}
.back_top {
    display:none !important}
}
@media screen and (device-width:320px) {
    a:link,a:visited,a:active,a:focus,#main #submit {
    -webkit-transition:none !important;
    -moz-transition:none !important;
    -o-transition:none !important;
    transition:none !important;
    opacity:1 !important}
h1 {
    -webkit-transition:none;
    -moz-transition:none;
    -o-transition:none;
    transition:none}
}
@media screen and (-webkit-min-device-pixel-ratio:1.5), screen and (-o-min-device-pixel-ratio:3 / 2), screen and (min-device-pixel-ratio:1.5) {
    header {
    -webkit-background-size:119px 119px;
    -moz-background-size:119px 119px;
    -o-background-size:119px 119px;
    background-size:119px 119px}
.cssmask h1 {
    -webkit-mask-image:url('/img/mask_packed_v2.png');
    -webkit-mask-size:50%}
.cssmask .sub h1 {
    -webkit-mask-image:none}
nav {
    -webkit-background-size:50px 50px;
    -moz-background-size:50px 50px;
    -o-background-size:50px 50px;
    background-size:50px 50px}
nav .active {
    background-image:url('../images/retina/arrow.png');
    -webkit-background-size:28px 29px;
    -moz-background-size:28px 29px;
    -o-background-size:28px 29px;
    background-size:28px 29px}
.twitter,.dribbble {
    background:transparent url('../images/retina/social_v2.png') no-repeat 0 0;
    -webkit-background-size:61px 27px;
    -moz-background-size:61px 27px;
    -o-background-size:61px 27px;
    background-size:61px 27px}
.oldie .twitter,.oldie .dribbble {
    background:transparent url('../images/social_v2.png') no-repeat 0 0}
.dribbble,.oldie .dribbble {
    background-position:-34px 0}
}
@media screen and (max-width:300px) {
    header {
    padding:24px 0 0}
h1,.sub h1 {
    font-size:2.9em}
.blog h1 {
    font-size:2em}
footer p {
    display:none}
#main aside img {
    margin:0 0 1em;
    width:100%;
    float:none}
#swipe {
    padding:0 0 31px}
.figure a {
    margin:0 auto 15px;
    width:74px}
.figure img {
    width:74px;
    height:74px}
}
@media screen and (max-width:610px) {
    .responsive_table table,.responsive_table thead,.responsive_table tbody,.responsive_table th,.responsive_table td,.responsive_table tr {
    display:block;
    font-size:14px}
.responsive_table thead tr {
    position:absolute;
    top:-9999px;
    left:-9999px}
.responsive_table tr {
    border:1px solid #d6d7d4}
.responsive_table td {
    border:none;
    border-bottom:1px solid #d6d7d4;
    position:relative;
    padding-left:50%;
    white-space:normal;
    text-align:left}
.responsive_table td:before {
    position:absolute;
    top:6px;
    left:6px;
    width:45%;
    padding-right:10px;
    white-space:nowrap;
    text-align:left;
    font-family:"PTSansBold-custom","Helvetica Neue",Helvetica,Arial,sans-serif}
.responsive_table td:before {
    content:attr(data-title)}
}