/*
Written by: Nikash SINGH
written on: 21:37 131209
written in: Brackets 02 (brackets.io)
written for: wordsEscaping.nikashSingh.com
Props to the H5BP crew for taking care of all the tricky stuff;
Nicolas Gallagher, Jonathan Neal, Kroc Camen, and the H5BP dev community and team.
*/

/* ==========================================================================
   H5BP Base styles & defaults
   ========================================================================== */
html, button, input, select, textarea {color:#222;}
body {font-size:1em; line-height:1.4;}
/* Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design. */
::-moz-selection {background:#b3d4fc; text-shadow:none;}
::selection {background:#b3d4fc; text-shadow:none;}
/* A better looking default horizontal rule */
hr {display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0;}
/* Remove the gap between images and the bottom of their containers: h5bp.com/i/440 */
img {vertical-align: middle;}
/* Remove default fieldset styles. */
fieldset {border:0; margin:0; padding:0;}
/* Allow only vertical resizing of textareas. */
textarea {resize:vertical;}
/* Chrome Frame prompt */
.chromeframe {margin:0.2em 0; background:#ccc; color:#000; padding:0.2em 0;}

/* NS: newer-element resets */
header, main, nav, article, aside, footer {display:block; margin:0px; padding:0px;}



/* ==========================================================================
   Custom styles
   ========================================================================== */

/*Generic text styles*/
html {overflow-y: scroll;}
html,body {width:100%; min-height:100%; padding:0px; margin:0px;
	background:#2C2C2C; color:#737373;}
body {font-family:Helvetica,Arial,sans-serif; font-size:0.77em;}
h1,h2,h3,h4,h5,h6 {font-family:"Helvetica-Neue",Helvetica,Arial,sans-serif; font-weight:200; color:#BBBBBB; margin:0px; padding:0px;}
a, a:link {color:#99AA00; text-decoration:none; cursor:pointer;}
mark > a, mark > a:link {color:#1A1A1A; text-decoration:none; cursor:pointer;}
a:visited {color:#434343; text-decoration:none; cursor:pointer;}
a:hover {color:#AACC00; text-decoration:none; cursor:pointer;}
em {font-style:italic;}
strong {font-weight:bold;}
.HorizontalList, .VerticalList {list-style:none; margin:0px; padding:0px;}
	.HorizontalList li {display:inline;}
	.VerticalList li {display:block;}
	.TagCloud li {display:inline-block;}

.textbox {background-color:#FFFFFF; border:thin; font-family:Helvetica, Arial, Verdana, sans-serif; color:#666666;}
.Polaroid {border:solid 4px #FFFFFF;
	-moz-box-shadow: 3px 3px 4px #999999;
	-webkit-box-shadow: 3px 3px 4px #999999;
	box-shadow: 3px 3px 4px #999999;
	}
.DropShadow {-moz-box-shadow: 3px 3px 4px #999999;
	-webkit-box-shadow: 3px 3px 4px #999999;
	box-shadow: 3px 3px 4px #999999;
	}
										/* Some good default colours:
										Green#99FF66 #66CC00	Lime#CCFF33		RedOrange#FF9966	Orange#FF9900
										Fuchsia#CC3399			Purple#9900FF	Blue#0099CC			Aqua#33CCCC		Cream#CCCC99*/

										/* CSS gradient to alpha
										background: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.9));
										background: -o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.9));
										background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,0)), to(rgba(0,0,0,0.9)));
										background: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.9));
										background: -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.9));
										*/

										/* CSS gradient from one Hex to another
										background: -moz-linear-gradient(top, #FFCC33, #FF0000);
										background: -o-linear-gradient(top, #FFCC33, #FF0000);
										background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFCC33), to(#FF0000));
										background: -webkit-linear-gradient(top, #FFCC33, #FF0000);
										background: -ms-linear-gradient(top, #FFCC33, #FF0000);
										*/

/*Site-specific styles
@font-face {font-family:'OvoReg';
	font-weight:normal;
	font-style:normal;
	src:url('ovoreg/ovoreg.ttf');
	}
.OvoReg {font-family:"OvoRegular",Georgia,serif;}
*/

/*Keyword/category colours*/
.Amateur-psyche:hover {background-color:#436675; color:#AADDCC;}
.Design:hover {background-color:#433375; color:#AA99FF;}
.Lesson:hover {background-color:#BB9933; color:#111111;}
.Life:hover {background-color:#99AA33; color:#333333;}
.Teaching:hover {background-color:orange; color:#333333;}
.Writing:hover, .Research:hover {background-color:#993333; color:#111111;}

.Demoted {opacity:0.5;}
.TheGreen {color:#8CC63E;}
.GeorgiaItalic {font-family:Georgia,Pristina,serif; font-style:italic;}

::selection {color:black; background:white;}
::-moz-selection {color:black; background:white;}

nav {display:block; font-size:1.1em;}
nav#NSglobalNav {border-left:solid 1px #373737; margin:-55px 0px 50px 300px;}	/* Apply "width:~00px" here as per site layout */
	nav#NSglobalNav ul.HorizontalNav {overflow:auto; list-style:none; margin:0px 0px 0px 13px; padding:0px;}
		nav#NSglobalNav ul.HorizontalNav li {list-style:none; display:block; float:left; margin:0px; padding:5px 7px; line-height:1.85em;}
			nav#NSglobalNav ul.HorizontalNav li a,
             nav#NSglobalNav ul.HorizontalNav li strong {display:block; margin:0px; padding:0px; font-weight:100; color:#999999;}
                nav#NSglobalNav ul.HorizontalNav li strong {color:#DDDDDD;}
                nav#NSglobalNav ul.HorizontalNav li a:hover {color:#FFFFFF;}
                nav#NSglobalNav ul.HorizontalNav li.CommentedOut strong:after {content:" ⇣";}
            nav#NSglobalNav ul.HorizontalNav li {border:none;}


/* -------------------------- Layout starts here -------------------------- */
.FloatLeft {float:left;}
.FloatRight {float:right;}
body {background:transparent;}
div#NSpageContainer {background:none;}
	div#NSpageContainer header {background:none;}
	div#NSpageContainer nav {background:none;}
	div#NSpageContainer main {background:none;}
	div#NSpageContainer article {background:none;}
	div#NSpageContainer aside {background:none;}
	div#NSpageContainer footer {background:none;}

	/* Apply "CenteredSite" to NSpageContainer.class for centered column-page */
	div#NSpageContainer.CenteredSite {width:900px; min-height:100%; margin:0px auto;}
		div#NSpageContainer.CenteredSite header {min-height:40px;}
		div#NSpageContainer.CenteredSite nav {padding:0px;}
		div#NSpageContainer.CenteredSite main {overflow:auto;}
			div#NSpageContainer.CenteredSite article {width:590px; height:100%; float:left; padding-bottom:40px;}
			div#NSpageContainer.CenteredSite aside {width:250px; height:100%; float:right; padding:65px 0px 40px 0px;}
		div#NSpageContainer.CenteredSite footer {height:30px; overflow:auto; text-align:left; padding-top:10px;}
			div#NSpageContainer.CenteredSite footer.FixedToBottom {position:fixed; bottom:0px; left:50%; width:600px;
                height:30px; overflow:auto; margin:0px 0px 0px -450px; border-top:solid 1px #333333; background:#2C2C2C;}
                div#NSpageContainer.CenteredSite footer.FixedToBottom span {line-height:25px;}
                    div#NSpageContainer.CenteredSite footer.FixedToBottom span p {font-size:1em; color:#202020; display:inline;}
                        div#NSpageContainer.CenteredSite footer.FixedToBottom:hover span p {color:#434343;}
                        div#NSpageContainer.CenteredSite footer.FixedToBottom:hover span p a {color:#434343;}
                    div#NSpageContainer.CenteredSite footer.FixedToBottom span p a {color:#232323;}
                        div#NSpageContainer.CenteredSite footer.FixedToBottom span p a:hover {color:#666666;}



	/* Apply "FloatingSite" to NSpageContainer.class for vertically and horizontally centred box */
	div#NSpageContainer.FloatingSite {width:980px; height:600px; position:absolute; top:50%; left:50%; margin:-300px 0px 0px -490px;}
		div#NSpageContainer.FloatingSite header {height:100px;}
		div#NSpageContainer.FloatingSite nav {padding:10px; height:40px;}
		div#NSpageContainer.FloatingSite main {overflow:auto; height:390px;}
			div#NSpageContainer.FloatingSite article {width:700px; height:100%; float:left;}
			div#NSpageContainer.FloatingSite aside {width:250px; height:100%; float:right;}
		div#NSpageContainer.FloatingSite footer {height:50px; overflow:auto; text-align:center;}

	/* Apply "FlexibleSite" to NSpageContainer.class for full-sreen */
	div#NSpageContainer.FlexibleSite {width:100%; height:100%; margin:0px;}
		div#NSpageContainer.FlexibleSite header {height:10%;}
		div#NSpageContainer.FlexibleSite nav {float:left; width:20%; height:85%;}
		div#NSpageContainer.FlexibleSite main {float:right; width:80%; height:85%;}
			div#NSpageContainer.FlexibleSite article {float:left; width:75%; height:100%;}
			div#NSpageContainer.FlexibleSite aside {float:right; width:20%; height:100%;}
		div#NSpageContainer.FlexibleSite footer {height:5%; clear:both;}


    div#NSpageContainer img#SiteLogo {margin:100px 0px 0px -37px; transform:rotate(0deg); -ms-transform:rotate(0deg); -webkit-transform:rotate(0deg);}
    div#NSpageContainer h3#SiteHeading {font-weight:bold; font-size:33px; letter-spacing:-2px; color:#DDDDDD; margin:-43px 0px 20px 3px;}
    div#NSpageContainer h1 {font-weight:100; font-size:2.3em; color:#999999; padding:0px; margin:43px 0px -5px 0px; text-rendering:optimizeLegibility;}
		div#NSpageContainer h2 {font-size:1.75em; font-weight:normal; color:#666666; margin:0.5em 0px 0px 0px; padding-bottom:0px;}
		div#NSpageContainer article ul.PostListing {font-size:1.1em; padding-left:2em; margin-top:2em; margin-bottom:5em;}
			div#NSpageContainer article ul.PostListing.Columnar {
				    -moz-column-count:2; -webkit-column-count:2; column-count:2;
				    -moz-column-gap:70px; -webkit-column-gap:70px; -column-gap:70px;
				    -moz-column-rule:none; -webkit-column-rule:none; column-rule:none;}
			div#NSpageContainer article ul.PostListing li {margin-bottom:1.5em;}
				div#NSpageContainer article ul.PostListing li:last-child {border-bottom:none;}

				div#NSpageContainer article ul.PostListing li time, div#NSpageContainer article ul.PostListing li mark {font-size:0.9em;}
				div#NSpageContainer article ul.PostListing li mark a {color:#1A1A1A; text-decoration:none; cursor:pointer;}

				div#NSpageContainer article ul.PostListing li time {}
				div#NSpageContainer article ul.PostListing li span.SmallerTags mark {font-size:0.66em; opacity:0.5; transition:0.7s;}
					div#NSpageContainer article ul.PostListing li span.SmallerTags mark:hover {font-size:0.9em; opacity:1; transition:0.3s;}

    div#NSpageContainer aside h3 {margin:43px 0px 0px 0px; color:#666666;}
			div#NSpageContainer aside ul#PostsList li mark a, div#NSpageContainer aside ul#QuotesList li mark a {color:#1A1A1A; text-decoration:none; cursor:pointer;}
    div#NSpageContainer time {font-family:Georgia,Baskerville,serif; font-style:italic; font-size:1.2em; color:#434343;}
		div#NSpageContainer a#EditLink {font-family:Georgia,Baskerville,serif; font-style:italic; color:#434343;}
    div#NSpageContainer p {color:#737373;}
    div#NSpageContainer hr {width:70%; outline:none; border:none; border-top:dotted 2px rgba(0,0,0,0.25);}

    div#NSpageContainer p#IntroSpiel {font-family:Georgia,Baskerville,serif; font-style:italic; font-size:1em; color:#666666;
        margin:5px 0px 80px 0px;}
    div#NSpageContainer section {
        margin:20px 0px;
        -moz-column-count:2;
        -webkit-column-count:2;
        column-count:2;
        -moz-column-gap:40px;
        -webkit-column-gap:40px;
        -column-gap:40px;
        -moz-column-rule:1px outset #333333;
        -webkit-column-rule:1px outset #333333;
        column-rule:1px outset #333333;
        }
        div#NSpageContainer section p:first-child {margin-top:0px;}
    div#NSpageContainer section.Columnless {
        margin:20px 0px;
        -moz-column-count:1;
        -webkit-column-count:1;
        column-count:1;
        -moz-column-gap:0px;
        -webkit-column-gap:0px;
        -column-gap:0px;
        -moz-column-rule:none;
        -webkit-column-rule:none;
        column-rule:none;
        }

		/* Image treatment in posts */
		div#NSpageContainer section p img {position:absolute; max-width:500px; clear:left; margin-top:10px;
			border:solid 5px #FFFFFF; box-shadow:0px 3px 8px #000000;}

    div#NSpageContainer span.Note {color:#515151; font-style:italic;}

    /* Form styling for write pages */
    form fieldset {margin:20px 0px;}
      form fieldset label {width:15%; display:inline-block;}
      form fieldset input {width:40%; padding:7px;}
      form fieldset textarea {width:68%; padding:7px;}
			form input[type="file"] {border:none; background-color:#434343; color:#666; padding:9px;
        box-shadow:0px 2px 3px rgba(0,0,0,0.5);}
      form input[type="submit"] {border:none; background-color:#99CC00; color:#336600; padding:7px 9px;
        box-shadow:0px 2px 3px rgba(0,0,0,0.5); border-radius:3px; margin-left:15%;}
				/* generally useful for highlight/editing in forms */
				::selection {background-color:#99CC00; color:#336600;}


    /* Aside list styles */
    div#NSpageContainer aside ul#PostsList li {padding:8px 0px 0px 43px;}
        div#NSpageContainer aside ul#PostsList li a {margin-left:0px; font-weight:normal; font-size:1.1em; color:#BBBBBB;}
				div#NSpageContainer aside ul#PostsList li time, div#NSpageContainer aside ul#PostsList li mark {font-size:0.9em;}
    div#NSpageContainer aside ul#QuotesList li {padding:8px 0px 0px 43px;}
        div#NSpageContainer aside ul#QuotesList li a {margin-left:0px; font-weight:normal; font-size:1.1em; color:#BBBBBB;}
				div#NSpageContainer aside ul#QuotesList li time, div#NSpageContainer aside ul#QuotesList li mark {font-size:0.9em;}
    div#NSpageContainer aside ul#KeywordsList li, div#NSpageContainer aside ul#QuotesKeywordsList li {padding:2px 0px 2px 43px;}
		div#NSpageContainer aside ul#KeywordsList.TagCloud li, div#NSpageContainer aside ul#QuotesKeywordsList.TagCloud li {padding:2px 0px 2px 3px;}

    div#NSpageContainer aside li.More {margin:3px 0px 10px 0px; opacity:0.43; font-family:Georgia,Baskerville,serif; font-style:italic;}
        div#NSpageContainer aside li.More:hover {margin:3px 0px 10px 10px; opacity:1; transition:1s;}



    /* Quotes-page specific styles */
    div#NSpageContainer blockquote {margin:3em 0px; font-family:Georgia,Pristina,serif; font-style:italic;
        font-size:1.43em; text-rendering:optimizeLegibility; line-height:123%; width:82%;}
        div#NSpageContainer blockquote a {display:block; font-family:"Helvetica-Neue",Helvetica,Arial,sans-serif;
            font-style:normal; font-weight:bold; font-size:0.9em; text-rendering:optimizeLegibility; margin-top:3px;}
        div#NSpageContainer blockquote cite {display:block; font-family:"Helvetica-Neue",Helvetica,Arial,sans-serif;
            font-style:normal; font-size:0.8em; opacity:0.5; margin-top:-1.43em;}
    div#NSpageContainer section.BlockQuoteReducedSpacing blockquote {margin:0px 0px 2em 0px;}


/*The contact-address lightbox*/
div#TheBox {display:none; position:fixed; top:0px; left:50%; width:300px; height:120px; margin:280px 0px 0px -150px;
    padding:3px 8px; text-align:center; background:#FFFFFF; box-shadow:1px 1px 15px #222222;}
    div#TheBox a {color:#05B8CC;}                   div#TheBox a:hover, div#TheBox a#Closer:hover {color:#757575;}
    div#TheBox a#Closer {display:block; margin-bottom:30px; text-align:right; font-size:1.3em; color:#CCCCCC;}

/*Page footer*/
div#NSpageContainer.BoxedSite footer#NSfooterContainer {display:block; position:fixed; bottom:1px; right:3px; color:#434343; font-size:0.8em; border-top:dotted 2px #555555;}
	div#NSpageContainer.BoxedSite footer#NSfooterContainer p {margin:0px; color:#555555;}
    div#NSpageContainer.BoxedSite footer#NSfooterContainer a {color:#666666; text-decoration:none;}     footer#NSfooterContainer a:hover {color:#8CC63E;}

/*TURN ON WHEN BUILDING: *:hover {border:solid 1px red;} */





/* ==========================================================================
   H5BP helper classes
   ========================================================================== */
/* Image replacement */
.ir {background-color:transparent; border:0; overflow:hidden; /* IE 6/7 fallback: */ *text-indent: -9999px;}
.ir:before {content:""; display:block; width:0; height:150%;}
/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden {display:none !important; visibility:hidden;}
/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden {border:0; clip:rect(0 0 0 0); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; width:1px;}
/* Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {clip:auto; height:auto; margin:0; overflow:visible; position:static; width:auto;}
/* Hide visually and from screenreaders, but maintain layout */
.invisible {visibility:hidden;}
/* Clearfix: contain floats
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements. */
.clearfix:before, .clearfix:after {content:" "; /* 1 */ display:table; /* 2 */}
.clearfix:after {clear:both;}
/* For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats. */
.clearfix {*zoom:1;}


/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */
@media only screen and (min-width:35em) { /* Style adjustments for viewports that meet the condition */ }
@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) { /* Style adjustments for high resolution devices */ }


/* ==========================================================================
   Print styles. Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */
@media print {
    * {background:transparent !important; color:#000 !important; /* Black prints faster: h5bp.com/s */ box-shadow:none !important; text-shadow:none !important;}
    a, a:visited {text-decoration:underline;}
    a[href]:after {content:" (" attr(href) ")";}
    abbr[title]:after {content:" (" attr(title) ")";}
    /* Don't show links for images, or javascript/internal links */
    .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after {content:"";}
    pre, blockquote {border:1px solid #999; page-break-inside:avoid;}
    thead {display:table-header-group; /* h5bp.com/t */}
    tr, img {page-break-inside:avoid;}
    img {max-width:100% !important;}
    @page {margin:0.5cm;}
    p, h2, h3 {orphans:3; widows:3;}
    h2, h3 {page-break-after:avoid;}
    }