/**
  Theme Name: NotOffline
  Theme URI: http://www.NotOffline.com
  Version: 7.0
  Author: KEN.ph
  Author URI: http://ken.ph
  Tags: ken, notoffline, blog, philippines, manila, kotan
  Licence: LGPL
  Description: Theme for NotOffline by Ken.PH
*/

//COLORS
@green: #00a600;
@gray: #bac0b2;
@black: #000000;
@black90: rgba(0,0,0,0.9);
@black80: rgba(0,0,0,0.8);
@black50: rgba(0,0,0,0.5);
@black30: rgba(0,0,0,0.3);
@black10: rgba(0,0,0,0.1);
@black05: rgba(0,0,0,0.05);
@black01: rgba(0,0,0,0.01);
@white: #ffffff;
@white50: rgba(255,255,255,0.5);

//PADDINGS & MARGINS
.pad (@a: 0px, @b: 0px, @c: 0px, @d: 0px) {padding: @arguments}
.pad2 (@y: 0px, @x: 0px) {padding: @arguments}
.pad4 (@xy: 0px) {padding: @arguments}
.padt (@y: 0px) {padding-top: @arguments}
.padr (@x: 0px) {padding-right: @arguments}
.padb (@y: 0px) {padding-bottom: @arguments}
.padl (@x: 0px) {padding-left: @arguments}
.pad0 {
	padding: 0;
	margin: 0;
}
.center {
	margin-left: auto;
	margin-right: auto;
}	

//SHADOWS & RADIUS
.boxshadow1 (@x: 0px, @y: 0px, @blur: 1px, @color: @black30) {
	box-shadow: @arguments;
	-moz-box-shadow: @arguments;
	-webkit-box-shadow: @arguments;
	-o-box-shadow: @arguments;
}
.textshadow1 (@x:  0px, @y: 0px, @blur: 1px, @color: @black30) {
	text-shadow: @arguments;
	-moz-text-shadow: @arguments;
	-webkit-text-shadow: @arguments;
	-o-text-shadow: @arguments;
}
.bradius (@xyz: 0px) {
	border-radius: @arguments;
	-moz-border-radius: @arguments;
	-webkit-border-radius: @arguments;
	-o-border-radius: @arguments;
}

//GENERAL
.overflow {overflow: hidden}
.left {float: left}
.right {float: right}
.inline {display: inline}
.clear {clear: both}
.block {display: block}
.blocki {display: inline-block}

//UL LI
.lst {list-style-type:none}

//FONTS
.verdana {font-family: verdana}
.myriad {font-family: myriad pro}
.arial {font-family: arial }
.georgia {font-family: georgia}
.tahoma {font-family: tahoma}
.georgiai {.georgia; font-style: italic}
.size10 {font-size: 10px}
.size11 {font-size: 11px}
.size12 {font-size: 12px}
.size13 {font-size: 13px}
.size23 {font-size: 23px}
.tright {text-align: right}
.tcenter {text-align: center}
.upper {text-transform: uppercase}
.ital {font-style: italic}
.bold {font-weight: bold}
.bnormal {font-weight: normal}
.nodecor {text-decoration: none}

//TRANSITION
.trans (@transproperty: all, @transtime: 1s, @transduration: ease-in-out, @transdelay: 0s) {
	transition: @arguments;
	-moz-transition: @arguments;
	-webkit-transition: @arguments;
	-o-transition: @arguments;
}

//FONT
@font-face {
    font-family: collatorz;
    src: url('font/collatorz.otf');
}
.coll {font-family: collatorz}

//CSS

//IMGALIGNS
.alignright {.right;}
.alignleft {.left}
.aligncenter {.center; .block;}

body {
	background: url(images/pattern.png) @gray;
}

img {
	border: 0;
}

#bodywrap {
	margin: 30px;
	.overflow;
	.bradius(10px);
	width: 1060px;
	background: @white;
	.center;
	.boxshadow1(0px,0px,5px,@black30);
}

header {
	.padb(30px);
	
	#logo {
		.block;
		.center;
		padding: 70px 0px;
	}
	
	#menu {
		width: 960px;
		border-top: 1px solid @black10;
		border-bottom: 3px solid @black80;
		
		ul {
			.pad0;
			.lst;
			.tcenter;
			li {
				.inline;
				a {
					.blocki;
					.pad2(15px, 10px);
					.coll;
					.nodecor;
					.size12;
					.bold;
					color: @black80;
				}
			}
		}
	}
}

#contentarea {
	.left;
	width: 600px;
	margin-left: 50px;
	
	
	//INDEX&HOME
	#posts {
		.pad0;
		
		li {
			.clear;
			.lst;
			.arial;
			.size12;
			.block;
			.pad2(20px, 0px);
			border-bottom: 1px dotted @black10;
			
			&:first-child {
				.padt(0px);
			}
			
			.postMeta {
				.size10;
				color: @black30;
				position: relative;
				a {
					color: @black30;
					.nodecor;
				}
			}
			
			.postIMG {
				.left;
				.padr(20px);
			}
			
			.postTitle {
				.coll;
				.size13;
				.pad0;
				.upper;
				a {
					.nodecor;
					color: @black80;
				}
			}
			
			.post {
				color: @black80;
				line-height: 21px;
				.blocki;
				.right;
				width: 320px;
			}
			
			.hr {.clear;}
			
			.really_simple_share {
				.right;
				width: 320px;
				.inline;
			}
			
		}
	
	}
	
	//PAGE
	article#page {
		.arial;
		.size12;
		.padb(50px);
		
		.postWrapper {
		
			.postTitle {
				margin-top: 0px;
				
				a {
				.coll;
				.size23;
				color: @black;
				.nodecor;
				}
			}
			
			.post {
				line-height: 23px;
				color: @black80;
				
				a {
					color: @green;
					.nodecor;
				}
				
				blockquote {
					.georgiai;
					background: url(images/blockquote.png) no-repeat;
					color:@black50;
					.padl(80px);
					margin-top: 50px;
					margin-bottom: 50px;
				}
				
				img {
					max-width: 550px;
				}
				
				.wp-caption {
					max-width: 550px;
					background: @black01;
					border: 1px solid @black05;
					.bradius(5px);
					.tcenter;
					.pad4(5px);
					
					.wp-caption-text {
						position: relative;
						.pad0;
						top: -10px;
						.georgiai;
						.size11;
						color:@black50;
					}
				}
			}
		}
	}
	
	//SINGLE
	article#single {
		.arial;
		.size12;
		
		.pro-player-container,iframe {
			.center;
			.block;
			.tcenter;
		}
		
		.postWrapper {
		
			.postTitle {
				margin-top: 0px;
				
				a {
				.coll;
				.size23;
				color: @black;
				.nodecor;
				}
			}
			
			.post {
				line-height: 23px;
				color: @black80;
				
				a {
					color: @green;
					.nodecor;
				}
				
				blockquote {
					.georgiai;
					background: url(images/blockquote.png) no-repeat;
					color:@black50;
					.padl(80px);
					margin-top: 50px;
					margin-bottom: 50px;
				}
				
				img {
					max-width: 550px;
				}
				
				.wp-caption {
					max-width: 550px;
					background: @black01;
					border: 1px solid @black05;
					.bradius(5px);
					.tcenter;
					.pad4(5px);
					
					.wp-caption-text {
						position: relative;
						.pad0;
						top: -10px;
						.georgiai;
						.size11;
						color:@black50;
					}
				}
			}
			
			.postMeta {
				background: @black05;
				.pad4(10px);
				border-top: 1px solid @black05;
				border-bottom: 1px solid @black05;
				
				a {
					color: @black30;
					.nodecor;
					.size10;
					.upper;
					.blocki;
					background: @black05;
					.pad2(5px,10px);
					.bradius(5px);
					.textshadow1(1px,1px,0px, @white50);
				}
			}
		}
		
		//COMMENTS 
		#comments {
			border-bottom: 2px solid @black80;
			.padb(15px);
		}
		
		#postcomment {
			border-top: 2px solid @black;
			border-bottom: 1px solid @black30;
			.pad2(10px,0px);
		}
		
		#commentlist {
				.lst;
				.pad0;
				
				li{
					.pad4(10px);
					color:@black50;
				
					&:nth-child(even) {
						background: @black05;
					}
				}
				
				a,b {
					.nodecor;
					color:@black;
				}
				
				.commentAvatar {
					.left;
					width: 75px;
					.pad2(0px,12px);
				}
				
				.commentText {
					.size11;
					width: 450px;
					.padr(30px);
					.right;
				}
				
				.commenthr {
					.clear;
				}
		}
		
		#commentfeed {
			.tcenter;
			
			a {
				.nodecor;
				color: @black;
				
				abbr {
					border: 0;
				}
				
				.pad4(10px);
			}
		}
		
		#commentform {
			.size12;
			.padb(30px);
			.padl(20px);
			
			input[type=submit] {
				width: 96%;
				.pad2(10px);
			}
			
			a {
				.nodecor;
				color:@black;
			}
		}
		
	}

	#pagination {
		.size10;
		.clear;
		.verdana;
		.block;
		.pad2(40px,0px);
		
		.current {
			background: @black80;
			border:1px solid @black;
		}
	}
}

#sidebar {
	.padb(50px);
	.right;
	margin-right: 50px;
	width: 300px;
	.arial;
	.size10;
	
	ul {
		.pad0;
		
		li {
			.lst;
			
			h4 {
				.coll;
				.size13;
				.upper;
				border-top: 2px solid @black80;
				border-bottom: 1px solid @black30;
				color: @black80;
				.pad2(10px,0px);
			}
			
			&.widget_recent_entries li,
			&.popular-posts li,
			&.widget_links li {
				.pad2(8px, 10px);
				border-bottom: 1px solid @black10;
				color: @black80;
				
				a {
					.size11;
					color: @black;
					.nodecor;
				}
				
				&:first-child {
					.padt(0px);
				}
				
				&:last-child {
					border-bottom: 0;
				}
			}
		}
	}
}

footer {
	.clear;
	.verdana;
	.size10;
	
	#foottweet {
		.pad2(20px, 0px);
		background: @black30;
		.textshadow1(1px,1px,0px, @white50);
		color: @black80;
		
		ul {
		.tcenter;
		.lst;
		.pad0;
		.inline;
		
			h4 {
				color: @black;
				.inline;
				.coll;
				font-style: normal;
				.padr(10px);
			}
			
			li {
				.inline;
				.georgiai;
				.size12;
				
				a {
					.nodecor;
					color: @black;
				}
			}
		}
		
		#foottweetfollow {
			.pad0;
			.block;
			.inline;
			.center;
			.coll;
			.size12;
			.padr(10px);
			background: @black10;
		}
	}
	
	#footlogo {
		background: url(images/logo-small.png) no-repeat center @black90;
		width: 100%;
		height: 80px;
	}
	
	#copyright {
		.pad4(25px);
		background: @black;
		width: 480px;
		.left;
		color: @gray;
	}
	
	#footlinks {
		.pad4(25px);
		background: @black;
		.left;
		width: 480px;
		ul {
			.pad0;
			.tright;
			li {
				.lst;
				.inline;
				a {
					color: @gray;
					.nodecor;
					.padl(10px);
				}
			}
		}
	}
}