@import "lesshat.less";
@import "utils.less";
@import "_partials/typography";
@import "_partials/buttons";
@import "_partials/article-view";
@import "_partials/article-edit";
@import "_partials/index";
@import "_partials/dashboard";
@import "_partials/gallery";
@import "_partials/user_projects";
@import "_partials/about";
@import "_partials/archives";
@import "_partials/header";
@import "_partials/footer";


// Variables 

// If you would like to use different fonts than the default change these

// Serif font used in articles
@body-font: 'Georgia', 'Times New Roman', Times, serif;
// Sans font used in titles
@sans-font: 'Open Sans','Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans','Gill Sans', Verdana, sans-serif;

@yellow: #ffcc00;
@rose-red: #ff5c39;
@cerulean: #47b1ff;
@green: #98cd45;
@orange: #ff9500;


// Uncomment this to see the grid of the site

// .edit();

* {
	box-sizing: border-box;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
}

html, body {
	height: 100%;
	position: relative;
}


// Opera fix
body:before {
	content: "";
	height: 100%;
	width: 0;
	margin-top: -32767px;
}


#wrap{
	min-height: 100%;
}

#main-wrapper {
	overflow: auto;
	padding-bottom: 60px;
}

textarea {
	background-color: transparent !important;
	resize: none;
}


.form-control,
textarea.form-control {
    background-color: rgba(0,0,0,.02) !important;
    .transition(all, 0.2s, ease-in);
    border: 1px solid rgba(0,0,0,0.1) !important;
    outline: 0 !important;
    &:focus {
    	box-shadow: none;
    	outline: 0px !important;
	    border-color: #cccccc;
	    -webkit-box-shadow: none;
	    background-color: rgba(0,0,0,.04) !important;
    }
    &:active {
    	outline: 0 !important;
	    -webkit-appearance: none;
    }
}

#login-panel img,
#create-account-panel img {
    width: 150px;
    left: 50%;
    .translateX(-50%);
    margin: 0 0 2em 0;
    position: relative;
}

#login-panel,
#create-account-panel {
	.clearfix();
	input[type='submit'] {
		clear: both;
	}
    @media screen and (max-width: @md){
        width: 100%;
    }
}

#not-found {
	height: 300px;
	width: 300px;
	background-image: url('../img/rose.jpg');
	background-repeat: no-repeat;
	.background-size(100%, auto);
	background-position: center center;
	top: 30%;
	a {
		position: absolute;
		bottom: -40px;
		left: 0;
		right: 0;
		margin: 0 auto;
		width: 120px;
		opacity: 0.8;
	}
}

.modal-window {
	position: fixed;
	background-color: white;
	padding: 2em 1em 0 1em;
	z-index: 4;
	.border-radius(4px);
	.bs-shadow();
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	margin: auto;
}

a:disabled,
a[disabled] {
	opacity: .6;
}

/* overlay at start */
.mfp-fade.mfp-bg {
	opacity: 0;

	-webkit-transition: all 0.15s ease-out;
	-moz-transition: all 0.15s ease-out;
	transition: all 0.15s ease-out;
}
/* overlay animate in */
.mfp-fade.mfp-bg.mfp-ready {
	opacity: 0.8;
}
/* overlay animate out */
.mfp-fade.mfp-bg.mfp-removing {
	opacity: 0;
}

/* content at start */
.mfp-fade.mfp-wrap .mfp-content {
	opacity: 0;

	-webkit-transition: all 0.15s ease-out;
	-moz-transition: all 0.15s ease-out;
	transition: all 0.15s ease-out;
}
/* content animate it */
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
	opacity: 1;
}
/* content animate out */
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
	opacity: 0;
}

.mfp-arrow-left:before,
.mfp-arrow-right:before{
	color: #fff;
	font-family: "fontello";
	font-size: 48px;
}
.mfp-arrow-right:before{
	content: '\e821';
	right: 0;
}
.mfp-arrow-left:before {
	content: '\e816';
}
.mfp-arrow-left:after,
.mfp-arrow-right:after {
	border: none;
	&:hover {
		border: none;
	}
}
.mfp-arrow:before,
.mfp-arrow:after {
	border: none
}

.vertical-center {
	top: 50%;
	.translateY(-50%);
	position: absolute;
}

// Container appearing when theres no content on the page
.empty-container {
	width: 200px;
	height: 200px;
	text-align: center;
	padding: 20px;
	left: 50%;
	.translateX(-50%);
	top: 30%;
	position: absolute;
	margin: 0;
	h4 {
		font-family: @sans-font;
		color: @black-50;
		display: inline-block;
		border-bottom: 2px solid @black-30;
		padding-bottom: 4px;
		font-size: 12px;
	}
	img {
		opacity: .8;
		width: 80px;
	}

}

