/* --------------------------------------------- */
/* COLOURS */

@c-light-background:	#fcfcfc;
@c-dark-background:		#dddddd;
@c-primary:				#e30d2e;
@c-secondary:			#000032;


/* DEFAULT COLOURS */
::selection 			{background: @c-primary}
::-moz-selection 		{background: @c-primary}








/* --------------------------------------------- */
/* TYPOGRAPHY */

/*
font-family:'DINNextRoundedLTW01-Reg';
font-family:'DINNextRoundedLTW01-Lig';
font-family:'DINNextRoundedLTW01-Bol';
font-family:'DINNextRoundedLTW01-Med';
*/



@fontbold:	'DIN Next W01 Medium', 'Akkurat', 'DIN 1451 Std', 'Helvetica Neue', Helvetica, "MS PGothic", sans-serif;
@fonttext:	'DIN Next W01 Regular', 'Akkurat', 'DIN 1451 Std', 'Helvetica Neue', Helvetica, "MS PGothic", sans-serif;

.t-grid					{font-family: @fontbold; font-weight: normal; font-size: 16px; line-height: 1em;}
.t-gridsmall			{font-family: @fonttext; font-weight: normal; font-size: 12px; line-height: 1em;}

.t-head					{font-family: @fontbold; font-weight: normal; font-size: 78px; line-height: 0.9em; text-transform: uppercase;}
.t-subhead				{font-family: @fontbold; font-weight: normal; font-size: 32px; line-height: 0.9em; text-transform: uppercase;}

.t-body					{font-family: @fonttext; font-weight: normal; font-size: 16px; line-height: 1.3em;}
.t-small				{font-family: @fonttext; font-weight: normal; font-size: 12px; line-height: 1.1em;}
.t-meta					{font-family: @fontbold; font-weight: normal; font-size: 16px; line-height: 1em;}

body, #nav-archive ul	{.t-body;}
h2						{.t-head;}
#post-comments h2		{.t-subhead;}
h1, .meta, h3, #page-nav, #nav-archive h4 {.t-meta;}

#grid h2				{.t-grid;}
#grid .date, .return	{.t-gridsmall;}


body, input, textarea	{-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none;}

h1						{text-transform: uppercase; margin-bottom: 1em;}
h2,h3					{margin: 0 }
p						{margin-bottom: 0.8em;}
.meta					{margin-bottom: 0; margin-top: 0.5em;}
article header .meta 	{margin-bottom: 0.8em; margin-top: 0;}

a 						{color: inherit; text-decoration: none;}
.no-touch #post-header a:hover,
.no-touch .return:hover 	{opacity: 0.5;}
.no-touch #post a:hover {color: @c-primary;}
.no-touch #post article.bypostauthor a:hover {color: @c-secondary;}

article ul, article ol 	{margin-left: 1.3em; margin-bottom: 10px;}
article ul 				{list-style: none;}
article ol 				{list-style: decimal;}
article li 				{margin-bottom: 5px;}
article ul li			{text-indent: -1.3em;}
article ul li:before	{ content: "- "; }

blockquote 				{margin-left: 2px; padding-left: @w-margin; border-left: 1px solid rgba(0,0,0,0.2)}




/* --------------------------------------------- */
/* WIDTHS & HEIGHTS */


@w-column: 		40px;
@w-gutter:		20px;
@w-margin:		@w-gutter / 2;
@h-gutter:		40px;
@w-padding:		20px;

@h-siteheader: 	205px;
@h-pageheader:	170px;

@w-sitemargin:	20px;


#post article	{width: 12 * (@w-column + @w-gutter); padding: 60px 0;}

.post-header, 
.post-content	{margin: 0 @w-margin;}
.post-header	{width: 3 * (@w-column + @w-gutter) - @w-gutter;}
.post-content	{width: 9 * (@w-column + @w-gutter) - @w-gutter;}




/* --------------------------------------------- */
/* COMMON STYLES */

.transition-in (@type: opacity) {
	-webkit-transition: @type 0.5s ease-in-out;
	-moz-transition: @type 0.5s ease-in-out;
	-o-transition: @type 0.5s ease-in-out;
	-ms-transition: @type 0.5s ease-in-out;
	transition: @type 0.5s ease-in-out;
	}
	
.transition-out (@type: opacity) {
	-webkit-transition: @type 1s ease-in-out;
	-moz-transition: @type 1s ease-in-out;
	-o-transition: @type 1s ease-in-out;
	-ms-transition: @type 1s ease-in-out;
	transition: @type 1s ease-in-out;
	}

.transition-none {
	-webkit-transition: none;
	-moz-transition: none;
	-o-transition: none;
	-ms-transition: none;
	transition: none;
	}
	
.forminput {
	border: 2px solid @c-secondary;
	background: none;
	color: @c-secondary;
	margin: 2px 0;
	padding: 0 5px;
	height: 24px;
	font-size: 13px;
	line-height: 1em;
	text-align: center;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	-o-border-radius: 0;
	border-radius: 0;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;
	.t-small
	}

	
.hidetext {	
	text-indent: 150%;
	white-space: nowrap;
	overflow: hidden;
	}
	
.debug {background: rgba(255,0,0,0.1)}
	











/* --------------------------------------------- */
/* GLOBAL NAVIGATION */

body		{background: @c-dark-background; color: @c-secondary;}


#site-header	{display: block; position: fixed; width: 100%; height: 100%; top: 0; background: url(../images/lines.png); background-repeat: no-repeat; background-position: center center; background-size: auto 550px; -webkit-backface-visibility: hidden;}


/* --------------------------------------------- */
/* GRID */

#grid {position: relative; width: 100%; overflow: hidden; z-index: 50;}
#grid-wrap {margin: 0 -3px 0 0;}
#grid article {position: relative;}
#grid article div {position: relative; display: block; width: 25%; float: left;}
#grid article div img {display: block; width: 100%; height: auto; opacity: 0.9;}

#grid header {display: none; position: absolute; top: 0px; left: 0px; padding: 10px; color: white; z-index: 100;}

#grid a:hover img {opacity: 1; background: rgba(10,0,150,0.5); background: rgba(227,13,46,0.2);}
#grid a:hover header {display: block;}

#grid #page-title div		{background: rgba(0,0,50,0.8);}
.no-rgba #grid #page-title div {background: url('../images/cattitle.png');}
#grid #page-title div header {display: block;}
#grid #page-title div img {visibility: hidden;}

/* --------------------------------------------- */
/* ARTICLE */


#post-header {position: fixed; top: 0; left: 0; display: table; width: 100%; height: 100%;}
#post-feature {display: block; position: absolute; top:0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; z-index: 40; opacity: 0.9;}

#post-title {position: absolute; width: 100%; height: 100%; display: table; vertical-align: middle; text-align: center; color: white; z-index: 60; }

#post-title-wrap {display: table-cell; vertical-align: middle; padding: 0;}
#post-title-wrap {
	h1, h2, .meta {margin-left: 10%; margin-right: 10%;}
}


#post {position: relative; z-index: 100; background: @c-light-background; margin-top: 100%; overflow: hidden; -webkit-backface-visibility: hidden;}

#post-content,
#post-comments 					{width: 80%; max-width: 720px;}
.post-text,
#post-comments article 			{width: 66.66%;}




#post-content,
#post-comments 					{text-align: center; margin: 0 auto; z-index: 100;}
#post-content					{padding-top: 1px;}
.post-text 						{margin: 60px auto;}

.post-images					{margin: 0 -5px;}
.post-images .post-image		{display: block; float: left; width: 100%; margin-bottom: 10px;}
.post-images .post-image.half	{width: 50%;}
.post-images .post-image.third	{width: 33.33334%;}
.post-images .image-wrap		{display: block; margin: 0 5px;}
.post-images img				{display: block; width: 100%; height: auto;}

#post #post-comments			{margin: 4em auto; border-top: 1px solid @c-secondary; padding-top: 4em;}
#post #post-comments article 	{width: 66.66%; margin: 2em auto; padding: 0;}
#post #post-comments article.bypostauthor {color: @c-primary;}
#post #post-addcomment 			{margin-top: 2em;}
#post article + #post-addcomment {margin-top: 4em; padding-top: 4em; border-top: 1px solid @c-secondary;}

#scroll {text-align: center; line-height: 30px; padding: 0; -webkit-backface-visibility: hidden; }
#page-nav 			{position: relative; display: block; width: auto; margin: 0 30px; text-transform: uppercase; -webkit-backface-visibility: hidden; white-space: nowrap;}
#page-nav div		{display: block; white-space: nowrap;}
#page-nav #nav-prev	{position: absolute; left: 0; top: 0; text-align: left; color: fadeout(@c-secondary, 80%);}
#page-nav #nav-page	{position: relative; display: block; width: 13em; margin: 0 auto; text-align: center;}
#page-nav #nav-next	{position: absolute; right: 0; top: 0; text-align: right; color: fadeout(@c-secondary, 80%);}
#page-nav a			{color: @c-secondary;}
#page-nav .action	{display: none;}

#page-nav .archive-link.active		{color: @c-primary;}
.no-touch #page-nav .archive-link.active:hover {color: @c-secondary;}

#page-nav #nav-archive	{text-align: center; margin-top: 2em; display: none; opacity: 0.1; .transition-in(opacity);}
#page-nav #nav-archive.active {opacity: 1}
#nav-archive h4		{margin-bottom: 0.3em;}
#nav-archive ul		{margin: 0 0 1em 0; white-space: normal; text-transform: none;}
#nav-archive li		{text-indent: 0; margin-bottom: 0; display: inline-block;}
#nav-archive li:before {content: none;}
#nav-archive li a:after {content: ',';}
#nav-archive li:last-child a:after {content: none;}

#nav-archive .nav-season {margin: 0;}
#nav-archive .nav-season:first {margin-top: 0.3em;}
#nav-archive .nav-season li:first-child:after {content: none;}


#page-footer {margin: 60px auto; text-align: center;}
#page-footer a {display: block; width: 50px; height: 50px; margin: 0 auto; background-image: url('../images/logo.png'); background-repeat: no-repeat; background-position: 0 0; background-size: 100% auto; .hidetext;}
.no-touch #page-footer a:hover {background-position: 0 -60px;}



/* --------------------------------------------- */
/* FORMS */

form				{width: 60%; margin: 1em auto;}
form ol				{list-style: none; padding: 0; display: block; margin: 0 -5px;}
.form-details		{margin-bottom: 0.5em;}
.form-details li	{display: block; float: left; width: 33.333%; margin-bottom: 10px;}
.form-comment li	{display: block; width: 100%;}
form li div			{display: block; margin: 0 5px;}
form label			{display: block;}



input[type="text"], input[type="email"], input[type="url"], input[type="file"], input[type="tel"], input[type="number"], input[type="password"], textarea {.forminput; width: 100%;}

textarea {width: 100%; height: 10em; padding: 5px;}

input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, textarea:focus {border-color: @c-primary;}


input[type="submit"] {
	display: block;
	background: none;
	border: none;
	color: @c-secondary;
	text-align: center;
	padding: 15px 0;
	margin: 0 auto;
	width: 100%;
	cursor: pointer;
	.t-body;
	}





.no-touch input[type="submit"]:hover	{color: @c-primary; .transition-none;}
.touch input[type="submit"]:active		{color: @c-primary; .transition-none;}
.no-touch input[type="submit"]:active	{position: relative; top:1px;}



::-webkit-input-placeholder	{color: @c-secondary; opacity: 0.3; text-align: center;}
:-moz-placeholder			{color: @c-secondary; opacity: 0.3; text-align: center;}
::-moz-placeholder			{color: @c-secondary; opacity: 0.3; text-align: center;}
:-ms-input-placeholder		{color: @c-secondary; opacity: 0.3; text-align: center;}





/* --------------------------------------------- */
/* MEDIA QUERIES */

 /* RETINA */

@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
	#page-footer a {background-image: url('../images/logo_2x.png');}
}


@media screen and (max-width: 1100px) {#site-header	{background-size: auto 500px;}}
@media screen and (max-width: 1000px) {#site-header	{background-size: auto 450px;}}
@media screen and (max-width: 900px) {#site-header	{background-size: auto 400px;}}
@media screen and (max-width: 800px) {#site-header	{background-size: auto 350px;}}
@media screen and (max-width: 700px) {#site-header	{background-size: auto 300px;}}
@media screen and (max-width: 600px) {#site-header	{background-size: auto 250px;}}
@media screen and (max-width: 500px) {#site-header	{background-size: auto 200px;}}
@media screen and (max-width: 400px) {#site-header	{background-size: auto 150px;}}


#grid article div {position: relative; display: block; width: 25%; float: left;}



/* MOBILE SCREEN */
@media screen and (max-width: 900px) {
	#grid article div {width: 33.33333%;}
	#page-nav .action		{display: inline;}
	#page-nav .title		{display: none;}

}

@media screen and (max-width: 420px) {
	
	.t-grid					{font-size: 13px;}
	.t-gridsmall			{font-size: 9px;}
	
	.t-head					{font-size: 40px;}
	.t-subhead				{font-size: 24px;}
	
	.t-body					{font-size: 13px;}
	.t-small				{font-size: 9px;}
	.t-meta					{font-size: 13px;}
	
	body, #nav-archive ul, input[type="submit"]	{.t-body;}
	h2						{.t-head;}
	#post-comments h2		{.t-subhead;}
	h1, .meta, h3, #page-nav, #nav-archive h4 {.t-meta;}
	
	#grid h2				{.t-grid;}
	#grid .date, .return	{.t-gridsmall;}
	
	#site-header			{display: table;}

	#page-nav 				{margin: 0 20px;}
	
	#post #post-content, #post #post-comments 		{width: auto; margin-left: 20px; margin-right: 20px;}
	#post .post-text, #post #post-comments article	{width: 100%;}
	form											{width: 100%;}
	.form-details li								{width: 100%;}
	
	.meta span.dash {display: none;}
	.cats {display: block; position: absolute; width: auto; left: 0; right: 0;}
}