/** My RULES Ignore Above **/

html,body{
			margin:0px;
			padding:0px;
			height:100%;
		}
		body{			
			color: rgb(92,97,98);
			/*rgb(142,149,152)*/
			font-size: 12px;
			font-family: 'Lora', sans-serif;
			background: #e9e6be url(/workspace/images/bg.png);
		}

		a { 
			text-decoration:none; 
			color: rgb(92,97,98);
			border-bottom:solid 1px;
		}
		a:visited{
			color:rgb(120,126,128);
			border-bottom:solid 1px;
		}
		a:hover{
			border-bottom:solid 2px;
			color: rgb(75,79,80);
		}
		.sitename{
			font-size:35px;
			font-family: 'Lora', sans-serif;
			font-variant:small-caps;
			color: rgb(102,107,109);
			/*rgb(168,173,180)*/
			text-shadow: 0px 1px 0px #eee;
			margin-top: 15px;
			display: block;
			float: left;
		}
		.sitename span{
			color: rgb(92,97,98);
			font-weight: normal;
		}
		
		.clear{
			clear:both;
		}
		
		.bottom{
			margin-top:-30px;
			clear:both;
			position:relative;
			z-index:3;
		}
		
		#maindiv {
			padding-bottom: 40px;
		}  /* must be same height as the footer +added some extra to allow padding at bottom of footer*/
		
		#sub-title{
			font-variant:small-caps;
			font-size:15px;
			margin-bottom:20px;
		}	
		
		.wide{
			margin:auto;
			width: 900px;
		}
		
		.wrapper{
			margin:auto;
			width: 900px;
			min-height:100%;
		}
		
		#design{
			padding-right: 10px;
			float:right;
			font-size:12px
		}
		
		#copyright{
			padding-left: 10px;
			float:left;
			font-size:12px
		}

#background-header {
    position: absolute;
    top: 0;
    width: 100%;
    height: 50px;
    background: rgba(195,200,205,0.6);
    z-index: 0;	
    border-bottom:solid 1px #eee;
}

.wrapper {
    position: relative;
    z-index: 1;
}

#sub-title {
    font-size: 12px;
    margin: 0;
    margin-top: -8px;
    text-transform: lowercase;
    float: left;
    clear: both;
}

#social-header {
    position: absolute;
    top: 5px;
    right: 0;
}

#social-header a {
    float: left;
    position: relative;
    width: 20px;
    height: 20px;
    background-size: 20px;
    opacity: 0.4;
	border:none;
}

#social-header a:hover {
    opacity: 1;
}

a.github {
    background: url(/workspace/images/social/github.png) no-repeat;
}

a.google {
    background: url(/workspace/images/social/google.png) no-repeat;
}

a.twitter {
    background: url(/workspace/images/social/twitter_alt.png) no-repeat;
}

a.linkedin {
    background: url(/workspace/images/social/linkedin_alt.png) no-repeat;
}

a.rss {
    background: url(/workspace/images/social/rss.png) no-repeat;
}

h1,h2,h3 {
    font-variant: small-caps;
}

.top-menu {
    font-size: 15px;
    float: right;
    margin-top: -32px;
    font-variant: small-caps;
}

.top-menu a {
    color: rgb(92,97,98);
    text-transform: lowercase;
    margin-left: 10px;
	border:none;
}

.top-menu a:hover {
    color: rgb(75,79,80);
	border-bottom:solid 2px;
}

#content {
	position:relative;
    float: right;
    width: 600px;
}

#sidebar {
    float: left;
    width: 250px;
}

#sidebar.small {
    width: 200px;
}

.widget a{
	border-bottom:none;
}
.widget a:hover{
	border-bottom:solid 1px;
}

.widget ul li {
    list-style: none;
    font-size: 12px;
    font-variant: small-caps;
    margin-bottom: 5px;
}

.widget ul {
    padding-left: 20px;
    padding-right: 5px;
}

.widget h4 {
    margin-left: 5px;
    font-variant: small-caps;
    margin-top:0;
}

.widget {
    background: rgba(213, 211, 191, 0.6);
	border-radius:3px;
    margin-top: 20px;
    padding:5px 0;
}

.widget:first-child{
	margin-top:0;
}

header {
    padding-bottom: 30px;
}

.profile-image {
    height: 250px;
    width: 200px;
    background: rgba(213,211,191,0.6) url(/workspace/images/jonathan-mifsud.png) no-repeat;
    border-radius: 3px;
}

.profile {
    margin-top: 20px;
    background: rgba(213,211,191,0.6);
    padding: 5px;
}

.profile span {
    font-size: 15px;
    display: block;
    font-variant: small-caps;
}

.profile p {
    margin-top: 0;
}

.mini-title {
    font-variant: small-caps;
    font-size: 14px;
    color: rgb(102,107,109);
    text-transform: lowercase;
    text-shadow: 0px 1px 0px #eee;
}

h1, h2 a {
    font-size: 30px;
    color: rgb(92,97,98);
    text-shadow: 0px 1px 0px #fff;
	line-height:1.3em;
	float:left;
	border-bottom:none;
}

h2 a:hover{
	border-bottom:none;
}

h1 span, h2 a span {
    font-size: 15px;
    display: block;
    margin-top: -20px;
}

#content h1:first-of-type, #content h2:first-of-type {
    margin-top: 0;
}

h1, h2{
    margin-bottom:0;
	display:block;
	float:left;
	width:100%;
}

.time{
    font-size:10px;
    margin-top:-5px;
    display:block;
    margin-bottom:20px;
	float:left;
	width:100%;
}

.section-title {
    display: block;
    text-shadow: 0px 1px 0px #fff;
    margin-bottom: -8px;
    font-size: 10px;
}

.read-more, .button{
    margin-right: 20px;
    float: right;
    font-variant: small-caps;
    font-size: 13px;
    margin-top: -10px;
    padding: 2px;
    border-radius: 3px;
    text-shadow: 1px 1px 0px #eee;
    border-bottom: solid 1px #eee;
    border-top: solid 1px rgba(213,211,191,1);
    border-right: solid 1px #eee;
    background: rgba(213,211,191,0.6);
	background:-webkit-linear-gradient(top, rgba(213, 211, 191, 0.5) 0%,rgba(213, 211, 191, 1) 100%); 
	background:-o-linear-gradient(top, rgba(213, 211, 191, 0.5) 0%,rgba(213, 211, 191, 1) 100%); 
	background:-moz-linear-gradient(top, rgba(213, 211, 191, 0.5) 0%,rgba(213, 211, 191, 1) 100%); 
	background:-linear-gradient(top, rgba(213, 211, 191, 0.5) 0%,rgba(213, 211, 191, 1) 100%); 
}

.read-more:visited {
    border-bottom: solid 1px #eee;
}
.read-more:hover {
    box-shadow: 0px 0px 20px #fff;
	color:rgb(75,79,80);
    border-bottom: solid 1px #eee;
}

.read-more:active {
    box-shadow: 0px 0px 20px #fff;
    text-shadow: -1px -1px 0px #eee;
    background: rgba(213,211,191,1);
	background:-webkit-linear-gradient(top, rgba(213, 211, 191, 1) 0%,rgba(213, 211, 191, 0.5) 100%); 
	background:-o-linear-gradient(top, rgba(213, 211, 191, 1) 0%,rgba(213, 211, 191, 0.5) 100%); 
	background:-moz-linear-gradient(top, rgba(213, 211, 191, 1) 0%,rgba(213, 211, 191, 0.5) 100%); 
	background:linear-gradient(top, rgba(213, 211, 191, 1) 0%,rgba(213, 211, 191, 0.5) 100%); 
}

#content p {
    font-size: 14px;
    line-height: 1.5em;
    text-align: justify;
}

#sidebar.low {
    margin-top: 50px;
}

#content.resume p {
    font-size: 12px;
    width: 500px;
    float: right;
    margin: 0px
;
}

#content.resume span.mini-title {
    float: left;
}

.skill-type {
    width: 250px;
    float: right;
}

.skill-type span {
    clear:both;
    float: right;
    border-bottom:solid 1px;
    float:left;
}

.skill-type:not(.other) span.skill{
	margin-left:20px;
	line-height:1em;
	margin-bottom:0.5em
}

.skill-type.other span.skill {
    width: auto;
    float: none;
    clear:none;
}

.skill-type.other span.skill:first-child{
    margin-left: 20px;
}
/*
.skill-type.other span.skill:not(:last-child):after {
    content: '|';
    margin-left: 5px;
    margin-right: 5px;
	border:none;
}*/

.skill-type span.skill-title {
    clear:both;
    width: 100%;
    float: left;
	border:none;
	font-variant:small-caps;
	text-shadow:0px 1px 0px #eee;
	font-weight:bold;
	font-size:13px;
}

.skill-type.other {
    width: 500px;
}

.skill-type span.expert {
    border-color: rgba(237,33,36,0.5);
}
.skill-type span.expert.highlight {
    border-color: rgba(237,33,36,1);
	background-color:rgba(255, 255, 255, 0.4);
	box-shadow:0px 0px 20px #fff;
}

.skill-type span.intermediate {
    border-color: rgba(250,162,31,0.5);
}
.skill-type span.intermediate.highlight {
    border-color: rgba(250,162,31,1);
	background-color:rgba(255, 255, 255, 0.4);
	box-shadow:0px 0px 20px #fff;
}

.skill-type span.beginner {
    border-color: rgba(52,255,0,0.5);
}
.skill-type span.beginner.highlight {
    border-color: rgba(52,255,0,1);
	background-color:rgba(255, 255, 255, 0.4);
	box-shadow:0px 0px 20px #fff;
}

#expertese {
    position: absolute;
    margin-left: -90px;
    width: 70px;
    margin-top: 20px;
    font-size: 10px;
    line-height: 1.5;
}

#expertese span {
    display: inline;
    cursor: pointer;
    border-bottom: solid 1px;
}

#expertese span#expert {
    border-color: rgb(237,33,36);
}

#expertese span#intermediate {
    border-color: rgb(250,162,31);
}

#expertese span#beginner {
    border-color: rgb(52,255,0);
}



.hire h1, .resume h1{
	margin-bottom:30px;
}

.resume .work-experience, .resume .project, .resume .education , .hire p{
    width: 500px;
    float: right;
    margin-bottom: 20px;
	margin-top:0;
}

.resume .details{
	float:right;
}

.skill-type {
    margin-bottom: 10px;
}

.skill-type.other{
    margin-bottom: 20px;
}

#content.resume .mini-title, #content.resume p.passion.details {
    margin-bottom: 20px;
}

#content.hire .mini-title {
    margin-bottom: 20px;
	float:left;
}

#content.hire p{
	font-size:12px;
}

.work-experience .company, .work-experience .role, .project .project-name , .project .project-company, .education-title {
    font-weight: bold;
    font-size: 13px;
    font-variant: small-caps;
}

.work-experience .period, .project .period, .education-details {
    font-variant: small-caps;
    color: rgb(102,107,109);
}

.education-title span{
    display:block;
    float:right;
}

#content.resume .details p{
    width: 480px;
    margin-top: 5px;
}

#content.resume .details ul{
    width: 420px;
    margin-top: 5px;
    padding-left:60px;
}

.hire input, .hire textarea {
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    background:rgba(213, 211, 191, 0.6);
    color:#8E9598;
    border: 1px solid #BBBDBF;
    padding: 10px 10px 10px 5px;
    width: 400px;
    margin-bottom: 12px;
    margin-top: 10px;
    -moz-box-shadow: inset 0px 2px 3px rgba(0,0,0,0.08);
    -webkit-box-shadow: inset 0px 2px 3px rgba(0,0,0,0.08);
    box-shadow: inset 0px 2px 3px rgba(0,0,0,0.08);
    float: right;
	resize:none;
}
.hire input:focus,.hire textarea:focus{
    background:#eee;
}

.hire input[type='submit'] {
    width: auto;
    color:#5C6162;
    border:solid 1px #eee;
}

.hire input[type='submit']:hover{
    background:rgba(213, 211, 191, 1);
    cursor:pointer;
}

.hire label.error{
    width:auto;
    margin-left:80px;
    color:red;
}

.hire input[type='submit']:active{
    border:1px solid rgb(187, 189, 191)
}

.hire label {
    float: left;
    width: 100%;
}

.hire label span {
    float: left;
    font-weight: bold;
    margin-top: 15px;
}

#contact-form {
    width: 500px;
    float: right;
}

#content pre{
    background: rgba(213, 211, 191, 0.6);
    padding: 10px;
    border-left:solid 1px #8E9598;
    width:500px;
    margin:auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    outline: none;
    overflow: hidden;
    text-overflow: ellipsis;
}

pre code{
	float:left;
	background:none;
}

.expand:after {
    content: '+';
    text-shadow: 1px 1px 0px #eee;
    margin-left: 5px;
}

.collapse:after {
    content: '-';
    text-shadow: 1px 1px 0px #eee;
    margin-left: 5px;
}

.collapse, .expand{
    cursor:pointer;   
}

.collapse:hover, .expand:hover{
    color:rgb(75,79,80);
}

.expand:after {
    content: '+';
    text-shadow: 1px 1px 0px #eee;
    margin-left: 5px;
}

.collapse:after {
    content: '-';
    text-shadow: 1px 1px 0px #eee;
    margin-left: 5px;
}

/* Pagination
================================================*/
ul.pagination {
    margin: 0;
}

ul.pagination li {
    float:left; 
    margin-left:4px;
    list-style-type: none;
    font-size: 1.2em;
    display: inline;
}

ul.pagination li a {
    display: block;
    float: left;
    padding: 2px 8px;
    margin-right: 3px;
    color: #777;
}

ul.pagination li span {
    float: left; 
    margin-right: 4px;
}

ul.pagination li a.page {
    background-color: #9FA19F;
    color: #ddd;
    font-weight: bold;
}

ul.pagination li a.page:hover {
    text-decoration: none;
    color: #fff;
}

ul.pagination li.selected a.page {
    background-color: #545C5F;
    color: #fff;
}

ul.pagination li.disabled a {
    color: #ddd;
    cursor: default;
}


code{
    background:rgba(213, 211, 191, 0.6);
	font-size:12px;
}

#content ol,#content  ul{
    float:left;   
    display:block;
    width:560px;
	padding-left:40px;
}


/* Start Blog Author info box*/
#AuthorBlock {
    background: rgba(213, 211, 191, 0.6);
    position: relative;
    float: left;
    width: 100%;
}

.signature-image {
    float: left;
    height: 100px;
    width: 80px;
    background: url(/image/1/0/100/images/jonathan-mifsud.png) no-repeat;
    border-radius: 3px;
}

#content div.signature {
    font-size: 14px;
    margin-left: 20px;
    width: 480px;
    float: left;
}

#content div.signature p {
    font-size: 12px;
}

#content div.signature h4 {
    margin-top: 0;
}
/*End Author info box*/

/* Social Media Fixed Position Stuff*/

.socialImpact {
    float: left;
    width: auto;
    overflow: hidden;
}

#SocialMedia {
	position: absolute;
	top: 70px;
	width: 60px;
	margin-left: 610px;
	padding: 10px;
	background: rgba(213, 211, 191, 0.6);
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}

#SocialMedia.fixed {
    position: fixed;
}

/*  End Fixed Social Media Position stuff*/

/*  Floating Sidebar Position stuff*/
#sidebar.fixed.bottom {
    bottom: 40px;
    top: auto;
}

#sidebar.fixed {
    position: fixed;
    top: 30px;
}

/* Floating Sidebar position stuff*/

/*Comment Stuff*/

.blog-comment .profile {
    background: none;
    width: 56px;
    float: left;
    margin: 0 20px 0 0;
    text-align: center;
}

.profile img {
    border: 3px solid #fff;
    width: 50px;
}

.profilepic {
    /*background: url(/workspace/images/shadow-profile-pic.png) no-repeat bottom center;*/
    padding: 0 0 4px 0;
}

span.nickname {
    font-size: 0.8em;
    color: #666;
}

.comment {
    /*position: absolute;*/
    float: right;
    width: 474px;
    margin: 0 0 0 0;
    padding: 15px 15px 5px 15px;
}

.author-pointer {
    position: absolute;
    top: 12px;
    left: 65px;
   /* background: url(/workspace/images/arrow-comment.png) no-repeat top left;*/
    width: 11px;
    height: 24px;
}

#comment-submit {
    float: right;
    margin-top: 10px;
}

#new-comment {
    margin-bottom: 20px;
	float:left;
}

#fresh-comment {
    padding-left: 10px;
    margin-left: 20px;
    padding-top: 1px;
    border-radius: 5px;
}

#fresh-comment .blog-comment{
	background:rgba(213, 211, 191, 0.8);
}

#new-comment p.error,#fresh-comment p.success {
    background: rgba(255,0,0,0.3);
    margin-right: 40px;
    padding: 5px;
    border-radius: 5px;
    text-shadow: 1px 1px 0px rgba(255,255,255,0.5);
    box-shadow: 0px 1px 0px rgba(0,0,0,0.3);
    font-weight: bold;
}

#fresh-comment p.success {
    background: rgba(0,255,0,0.3);
    margin-right: 0px;
}

p.reply a, #comment-submit {
    position: relative;
    border: none;
    box-shadow: none;
    text-decoration: none;
    text-shadow: 1px 1px #ccc;
    padding-top: 7px;
    padding-right: 20px;
    padding-bottom: 7px;
    padding-left: 20px;
    z-index: 1;
    background: rgba(255,255,255,0.7);
    text-transform: uppercase;
    font-size: 11px;
    color: #5C6162;
    cursor: pointer;
    border-radius: 3px;
}

p.reply a:hover, #comment-submit:hover {
    background: rgba(255,255,255,0.9);
    text-shadow: -1px -1px #ccc;
}

p.reply a:after, #comment-submit:after {
    content: '';
    /*background-image: url(/workspace/images/title/reply-sticker.png);*/
    background-repeat: no-repeat;
    width: 73px;
    height: 27px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}

p.reply a:hover:after, #comment-submit:hover:after {
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    transform: rotate(3deg);
}

#content .comment p.comment-date {
    float: right;
    padding: 0 0 0 0;
    font-size: 0.7em;
    color: #999;
}

.comment-tip:before {
    content: "";
    position: absolute;
    border-top: 10px solid rgba(255, 255, 255, 0.8);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    visibility: visible;
    top: 24px;
    left: 15px;
}

.comment-tip {
    display: block;
    float: left;
    position: relative;
    margin-top: -50px;
	top:-20px;
    left: 0px;
    background: rgba(255, 255, 255, 0.8);
    padding: 5px 15px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    white-space: nowrap;
    z-index: 10;
    font-size: 11px;
}

#comment-form {
    position: relative;
}

#comment-form #comment-text-tip.comment-tip {
    margin-top: -80px;
}


#content-left footer h3 {
    margin-bottom: 10px;
    color: #828282;
    text-shadow: 1px 1px 1px #fff;
}

.blog-comment input {
    width: 90%;
    border: none;
    resize: none;
    padding: 10px;
    background: rgba(0,0,0,0.1);
    border-radius: 3px;
	color: #5C6162;
	font-family: lora;
	float:left;
}

.blog-comment textarea {
    width: 90%;
    border: none;
    resize: none;
    height: 50px;
    padding: 10px;
    background: rgba(0,0,0,0.1);
    border-radius: 3px;
	color: #5C6162;
	font-family: lora;
	float:left;
}

.blog-comment {
    background: rgba(213, 211, 191, 0.6);
    position: relative;
    float: left;
    border-radius: 3px;
}

.blog-comment .reply {
    display: block;
    float: right;
}

#content .blog-comment p {
    font-size: 12px;
}

#content .blog-comment p:first-child {
    margin-top: 0px;
}

#content .blog-comment p.comment-date {
    display: block;
    float: left;
    margin-top: 12px;
}

/*comment reply indent*/

.story.reply {
    width: 550px;
    margin-left: 30px;
}

.story.reply .comment {
    width: 434px;
}

.story.reply2 {
    width: 520px;
    margin-left: 60px;
}

.story.reply2 .comment {
    width: 404px;
}

/*end comment reply indent*/

.story {
    position: relative;
	float:left;
}

.post-details, #content p.post-details {
    text-transform: uppercase;
    font-size: 11px;
}

.float-title {
    float: left;
}

#leave-comment {
    margin-top: 17px;
    margin-left: 20px;
    float:left;
}



/*End Comment Stuff*/