/* Mixins
* ----------------------------------------------------------------- */

@import "nt_mixins.less";

/* Variables
* ----------------------------------------------------------------- */

/* colors */

@nt-active: #3c9cff;
@nt-regular: #595959;
@nt-body: #a6a6a6;
@nt-digits: #4d483f;
@white: #ffffff;
@black: #000000;

@notice-bg: #FFDE6B;
@notice: #8d6d00;

@twitter:#3fc7f7;
@google:#f2af16;
@dribbble:#ea4c88;
@flickr1:#0063dc;
@flickr2:#ff0084;
@forrst:#5b9a68;

/* font stacks */

@helvetica: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
@museo: 'MuseoSlab500', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;


/* sizes */

@fontsize: 15px;
@baseline: 1.7em;

/* images */

@mask: "@{themeurl}/images/sprite_mask.png";

@mask100: "@{themeurl}/images/mask100.png";
@mask100-hover: "@{themeurl}/images/mask100-hover.png";
@mask50: "@{themeurl}/images/mask50.png";
@mask50-bg: "@{themeurl}/images/mask50-bg.png";

@bg-dark: "@{themeurl}/images/texture-bg-2-blk.jpg";
@bg-white-dark: "@{themeurl}/images/texture-bg-2-dark.jpg";

/* Basics
* ----------------------------------------------------------------- */ 

.right {float:right;}
.left {float:left;}

a, a:active, a:link, a:visited {
	color:@nt-active;
	text-decoration:none;
}

a:hover {
	color: (@nt-active + #333);
}

span.notice {
        color: @notice;
        background-color: @notice-bg;
        padding:2px 4px;
        .border-radius(2px);
        text-shadow: 0 1px 0 rgba(255,255,255,.7);
}

span.notice-2 {
        color: @nt-regular;
        background-color: (@nt-regular + #888);
        padding:2px 4px;
        .border-radius(2px);
        text-shadow: 0 1px 0 rgba(255,255,255,.5);
}

span.nt-active {
        color: @nt-active;
}

.photo {
        border:5px solid #fff;
        outline:1px solid #ababab;
        .box-shadow( 0px 1px 4px 1px rgba(0, 0, 0, 0.4) );
}

/* Typography (v-rhythm still needs work)
* ----------------------------------------------------------------- */ 

body {
        font-family:@helvetica;
        font-size: @fontsize;
        line-height:@baseline;
        text-shadow: 0 1px 1px rgba(0,0,0,.1);
}

h1, h2, h3, h4, h5, h6{
	    font-family:@museo;
        color: ( @nt-regular - #111 );
        font-weight:normal;
        line-height: ( @baseline / 2 );
        margin: ( @baseline * 0.8 ) 0;
}


h1.post-title {
        font-size:(@fontsize * 3);
        margin-bottom:20px;
        line-height:50px !important;
}

h2.post-title {
        font-size:(@fontsize * 1.5);
        margin:0 0 5px 0;
        line-height:30px !important;
}

h1#title-blog {
        position:relative;
        top:-12px;
        font-weight:bold;
}

h1 {font-size:(@fontsize * 2)}
h2 {font-size:(@fontsize * 2)}
h3 {font-size:(@fontsize * 1.5)}

p, ul, ol, blockquote, img  {
        display:block;
        font-size: @fontsize;
}

.post-content img {
	margin: ( @baseline ) 0 ( @baseline ) 0;
}

.post-content p:first-child {margin-top:0px !important;}

/* Custom Typography
* ----------------------------------------------------------------- */ 

#sidebar h4.widget {
        text-shadow: 0 -1px 0px rgba(0,0,0,0.9);
        text-align:center;
        font-size: @fontsize * 1.5;
        margin: 0 0 13px 0 !important;
        padding-bottom:15px;
        line-height: 20px !important;
        background: transparent url('@{themeurl}/images/widget-h-bg.png') repeat-x bottom;
}

/* General
* ----------------------------------------------------------------- */

body {
        background: url('@{themeurl}/images/texture-bg-2.jpg');
	color:@nt-regular;
	-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
	-webkit-text-size-adjust: 100%;
}

nav#topbar {
        background-image: url( '@{themeurl}/images/texture-bg-2-blk.jpg' );
        margin:0;
        padding:7px;
        .box-shadow;
        overflow:auto;
}

nav#topbar #logo {
        float:left;
}

nav#topbar #logo, nav#topbar #logo img {
        margin:0 !important;
        padding:0 !important;
        line-height:0px;
        width:25px;
        height:25px;
}

#navigation {
        float:left;
        width:60%;
        overflow:auto;
}

#navigation .nav-link {
        padding-left:40px;
        float:left;
}

#navigation .nav-link a {
        position:relative;
        font-family:@museo;
        color:@white;
}

#navigation .nav-link a:hover {
        top:-1px;
}

blockquote {
        font-size:3em;
        line-height:@baseline * 0.6;
        font-family:@museo;
        text-shadow:0 1px 0px rgba(255,255,255,0.3);
        color:#2c74cd;
}

blockquote:before {
        content: '"';
}

#main {padding-top:0px;}

.row {
  
}

/* Footer
* ----------------------------------------------------------------- */

#terminal-footer {
        margin-top:50px !important;
        font-size:12px;
        background: url( "@{themeurl}/images/texture-bg-2-blk.jpg" ) top left;
        text-align:center;
        margin:0 0 0px 0;
        padding:5px 0px;
        width:100%;
        text-shadow: 0 1px 1px rgba(0,0,0,1);
}

/* Profile
* ----------------------------------------------------------------- */
section#profile {
        font-family:@museo;
        text-shadow: 1px 1px 3px rgba(255,255,255,1) !important;
        font-size:16px;
        height:170px;
        padding: 20px 45% 0 5%;
        background: url('@{themeurl}/images/profile-picture.jpg') no-repeat top right;
        .border-radius(20px);
        .box-shadow (inset 0px 1px 1px 1px rgba(0, 0, 0, 0.2));
}

section#profile p {margin:0;padding:0;}

/* Flickr
* ----------------------------------------------------------------- */

.flickr_badge_image {
        float:left;
        margin:2% !important;
        width:75px;
        height:75px;
}

.flickr_badge_image:nth-child(4n+5) {
        margin-right:0px !important;
}

.flickr_badge_image img {.border-radius(20px);opacity:0.5;margin:0;padding:0;}
.flickr_badge_image img:hover {opacity:1;}
        

/* Social Media
* ----------------------------------------------------------------- */

.sticky #recentposts {
	position:fixed;
        top:0;
}

.socialmedia {
        .border-radius(20px);
        background: ( @nt-regular - #333 ) url( "@{themeurl}/images/texture-bg-2-blk.jpg" );
        padding:20px 10px;
        font-size:13px;
        .box-shadow (inset 0px 2px 0px 1px rgba(0, 0, 0, 0.4));
	position:fixed;
	top:0;
	left:0;
        text-align:center !important;
}

#social-icons {
        position:relative;
        min-height:70px;
        overflow:hidden !important;
}

#social-icons-home {
        position:relative;
        min-height:90px;
        overflow:hidden !important;
        width:350px;
        margin:20px auto 20px auto;
}

.social-outer-bg {
    position:absolute;
    top:0;
    width:70px;
    height:70px;
    background-image: url('@{themeurl}/images/social-bg.png');
}

.social-icon {
        .border-radius(25px);
        overflow:hidden;
        position:absolute;
        top:10px;
        left:10px;
        width:50px;
        height:50px;
        -webkit-mask-image: url('@{themeurl}/images/sprite_mask.png');
        -webkit-mask-position: 0 -200px;
        -webkit-transition-duration: 0.8s;
        -moz-transition-duration: 0.8s;
        -o-transition-duration: 0.8s;
        transition-duration: 0.8s;
        -webkit-transition-property: -webkit-transform;
        -moz-transition-property: -moz-transform;
        -o-transition-property: -o-transform;
        transition-property: transform;
}

.social-icon:hover {
        -webkit-transform:rotate(360deg);
        -moz-transform:rotate(360deg);
        -o-transform:rotate(360deg);
}

.social-inner-bg {
    position:absolute;
    top:0;
    left:0;
    width:50px;
    height:50px;
    background-image: url( "@{themeurl}/images/texture-bg-2-blk.jpg" );
}
.social-logo {
    width:50px;
    height:50px;
    position:absolute;
    top:0;
    left:0;
    background-image: url('@{themeurl}/images/sprite_mask.png');
}

.twitter-logo {background-position:-100px 0px !important;}
.dribbble-logo {background-position:-100px -100px !important;}
.flickr-logo {background-position:-100px -150px !important;}
.forrst-logo {background-position:-100px -200px !important;}

.twitter {left:20px;}
.dribbble {left:100px;}
.flickr {left:260px;}
.forrst {left:180px;}

.twitter-bg:hover {background-image:none;#gradient > .vertical(@twitter,(@twitter - #333))}
.dribbble-bg:hover {background-image:none;#gradient > .vertical(@dribbble,(@dribbble - #333));}
.flickr-bg:hover {background-image:none;#gradient > .horizontal(@flickr1,@flickr2);}
.forrst-bg:hover {background-image:none;#gradient > .vertical(@forrst,(@forrst - #333));}

/* Search
* ----------------------------------------------------------------- */

#searchform fieldset {
        width:100%;
        display:block;
        .border-radius(20px);
        padding:0;
        margin:0;
        border:none;
        background: ( @nt-regular - #333 ) url( "@{themeurl}/images/texture-bg-2-blk.jpg" );
}

#searchform input {
        -webkit-appearance: none;
        width:92%;
        padding:4%;
        font-family:@museo;
        background: transparent url('@{themeurl}/images/search.png') no-repeat 2% 55%;
        text-indent:44px;
        color: @white;
        border: none;
        text-shadow: 0 2px 1px rgba(0,0,0,1);
}

#searchform input::-webkit-input-placeholder {
        color: ( @nt-regular - #111 ) !important;
        text-shadow: 0 -1px 0px rgba(0,0,0,0.9) !important;
}

#searchform input:-moz-placeholder {
        color: ( @nt-regular - #111 ) !important;
        text-shadow: 0 -1px 0px rgba(0,0,0,0.9) !important;
}

#searchform input:focus {
        outline:none;
}

/* Main & Logo
* ----------------------------------------------------------------- */

#header-main {
	position:relative;
	height:337px;
	overflow:visible;
}

#header-logo {
	position: absolute;
	left:-5px;
	top:-2px;
	background: url('@{themeurl}/images/logo.png') no-repeat top left;
	width:169px;
	height:133px;
}

/* Navigation
* ----------------------------------------------------------------- */

#header-nav {
	height:50px;
	width:100%;
	background:#fff;
	margin:0;
	padding:0;
}

ul#primary-navigation {
	list-style-type:none;
	padding:0px;
	margin:0px;
	overflow:auto;
}

ul#primary-navigation li {
	margin:0;
}

ul#primary-navigation li a {
	list-style-type:none;
	float:right;
	margin:0;
	padding:0 20px;
	line-height:57px;
	height:57px;
}

ul#primary-navigation li.active a,
ul#primary-navigation li a:hover {
	background: url('@{themeurl}/images/black30.png');
}

/* Home
* ----------------------------------------------------------------- */

h1.home-title {
    font-size:120px;
    margin:240px 0 20px 0;
    color:(@nt-regular);
    opacity:0.2;
}

h2.home-tagline {
    font-size:16px;
    margin:20px 0;
    line-height:32px;
    color: @nt-regular;
    font-family: @helvetica;
    font-weight:norml
}

.home-profile {
    margin:3px 0 0 3px;
    padding:7px;
    max-width:429px;
    background:#fff;
    border-radius(3px);
    .box-shadow (0px 1px 3px 1px rgba(0, 0, 0, 0.3));
}

.home-profile img {
    max-width:100% !important;
    width:100% !important;
}

.home-project {
        padding-left:120px;
        position:relative;
        min-height:110px;
}

.home-project .title {
        font-family:@museo;
        font-size:20px;
}

.home-project .title span {
        position:relative;
}

.in-development {
        color:@nt-active;
        position:absolute;
        text-transform:uppercase;
        font-size:10px;
        letter-spacing: 1px;
        right:-110px;
        top:-6px;
}

.home-project img {
        position:absolute;
        left:0px;
}

.thumb-post {
        width:100px;
        height:100px;
        -webkit-mask-box-image: url("{@mask100}");
}

ul.home-mentions,
ul.home-post-list {
    padding:0;
    margin:0;
}

ul.home-post-list li {
        margin-bottom:5px;
        list-style-type:none;
        background: url('@{themeurl}/images/ul-bullet.png') no-repeat  0 6px;
        padding-left:16px;
}

ul.home-mentions li {
        position:relative;
        list-style-type:none;
        margin-bottom:5px;
        padding-left:24px;
}

ul.home-mentions li img {
        position:absolute;
        top:4px;
        left:0;
}

.dthumb {
        display:block;
        width:100%;
        height:70px;
        margin-bottom:10px;
        .box-shadow (0px 2px 3px 1px rgba(0, 0, 0, 0.2));
        .border-radius(5px);
        background-position: -25px -125px;
}

.mthumb {
        display:block;
        float:left;
        width:50px;
        height:50px;
}



/*
.thumb-post:hover {
        -webkit-mask-box-image: url("@{mask100-hover}");
}
*/

/* Blog Index
* ----------------------------------------------------------------- */

.post-meta {
        font-size:12px;
        color: ( @nt-regular + #333 );
        text-shadow:none;
        margin:0 0 10px 0;
}

.post-text {
        float:left;
        width:80%;
}

.post-thumb {
        float:left;
        width:100px;
        height:100px;
        -webkit-mask-image: url('@{themeurl}/images/sprite_mask.png');
        -webkit-mask-position: 0 -100px; 
        margin-right:20px;
}

.post-thumb:hover {
        -webkit-mask-position: 0 0px; 
}

.post-thumb img {
        margin:0;
        padding:0;
        max-width:100% !important;
}

.index-post {
       overflow:auto;
       margin-bottom:30px;
}

.index-post p {
        margin: 5px 0;
}

/* Pagination
* ----------------------------------------------------------------- */

ol.wp-paginate {padding:20px 0 5px; margin:0;border-top:1px dotted rgba(0,0,0,0.2)}
.wp-paginate li {display:inline; list-style:none;padding:5px;}
.wp-paginate a {background:rgba(255,255,255,0.2); .box-shadow (0px 1px 3px 1px rgba(0, 0, 0, 0.2)); .border-radius(5px); margin-right:4px; padding:3px 6px; text-align:center; text-decoration:none;}
.wp-paginate a:hover {color: @nt-active;background:rgba(255,255,255,0.1); .box-shadow (0px 0px 2px 1px rgba(0, 0, 0, 0.2));position:relative;top:1px; }
.wp-paginate a:active {background:rgba(255,255,255,0.8)}
.wp-paginate .title {color:#555; margin-right:4px;}
.wp-paginate .gap {color:#999; margin-right:4px;}
.wp-paginate .current {background:@nt-active; color:@white; .box-shadow (0px 1px 3px 1px rgba(0, 0, 0, 0.2)); .border-radius(5px); margin-right:4px; padding:3px 6px; text-align:center; text-decoration:none;}
.wp-paginate .page {}
.wp-paginate .prev, .wp-paginate .next {}

/* Post
* ----------------------------------------------------------------- */

.post img.nt-image {
    .border-radius(20px);
}

.post img.nt-image2 {
    .border-radius(20px);
    .box-shadow (0px 0px 3px 1px rgba(0, 0, 0, 0.3));
}



.like-this-post {
        .border-radius(10px);
        background-color:#ddd;
        .box-shadow( 0px 1px 4px 1px rgba(0, 0, 0, 0.4) );
}

.syntaxhighlighter {
        .border-radius(10px);
        overflow:hidden;
        .box-shadow;
        padding:2%;
        width:96% !important;
        background: ( @nt-regular - #333 ) url( "@{themeurl}/images/texture-bg-2-blk.jpg" );
        .box-shadow (inset 0px 4px 6px 3px rgba(0, 0, 0, 0.6));
        text-shadow: 0 2px 1px rgba(0,0,0,1);
}

.nt-notice {
        .border-radius(5px);
        .gradientBar((@notice-bg + #333), @notice-bg);
        color:@notice;
        text-shadow: 0 1px 1px rgba(255,255,255,0.7);
        padding:5px 10px;
        border-style:solid;
        border-width:1px;
        margin:10px 0;
}

/* Sidebar
* ----------------------------------------------------------------- */

#sidebar section {
        margin-bottom:20px;
        overflow:auto;
        position:relative;
}

#sidebar section.widget {
        .border-radius(20px);
        background: ( @nt-regular - #333 ) url( "@{themeurl}/images/texture-bg-2-blk.jpg" );
        padding:20px;
        font-size:13px;
        .box-shadow (inset 0px 2px 0px 1px rgba(0, 0, 0, 0.4));
         text-shadow: 0 2px 1px rgba(0,0,0,1);
}

#sidebar section.widget a {
        color: @white;
}

#sidebar .recent-posts {
        display:block;
        position:relative;
        margin:5px 0;
        overflow:visible;
        min-height:60px;
}

#sidebar .recent-thumb-bg {
        position:absolute;
        background: url("{@mask50-bg}") no-repeat;
        top:10px;
        width:50px;
        height:50px;
        z-index:5;
        opacity:0.8;
}

#sidebar .recent-thumb {
        position:absolute;
        float:left;
        width:50px;
        height:50px;
        z-index:10;
}

#sidebar .recent-thumb:hover {
        -webkit-animation-name: pulse;
	-moz-animation-name: pulse;
	-ms-animation-name: pulse;
	-o-animation-name: pulse;
	animation-name: pulse;
}

#sidebar .recent-title {
        margin-top:4px;
        width:75%;
        float:left;
        padding-left:70px;
        line-height:20px;
        v-align:middle;
        min-height:50px;
}

#sidebar span.recent-date {
        text-shadow: 0 -1px 0px rgba(0,0,0,0.9);
}

.thumb-side {
    width:50px;
    height:50px;
    -webkit-mask-box-image: url("{@mask50}");
}

.thumb-side:hover {
    -webkit-mask-box-image: url("{@mask50}");
}