/** 
 *
 * Template basic code
 *
 **/
 
@page: 'normal';

body {
	color: @textcolor;
	font-size: @baseBodyFontSize;
	font-weight: normal;
	line-height: 1.85*@baseBodyFontSize;
}

a {
	color: @color1;
	outline: none!important;

	&:active,
	&:focus,
	&:hover {
		color: @lightcolor1;
		text-decoration: none;
	}
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: @headerscolor;
	font-weight: 400;
}

.row {
	clear: both;
}

.row:after {
	clear: both;
	content: "";
	display: table;
}

/* Header */
body > header {
	> .row {
		background: @lightcolor;
		border-top: 1px solid @lightgrey;
		border-bottom: 1px solid @lightgrey;
		margin: 10px 0 20px 0;
		padding: 10px 0;

		p,
		form {
			margin: 0;
		}
	}

	> h1 {
		line-height: 1.2*@baseHeadersFontSize;
		margin-bottom: 20px;

		small {
			clear: both;
			display: block;
			font-size: 0.7*@baseHeadersFontSize;
		}
	}

	#mod-search-searchword {
		float: right;
		margin-bottom: 0!important;
	}

	& + section#gk-main:before {
		border-top: 1px solid @lightgrey;
		content: "";
		display: block;
		margin-top: 0;
		padding-top: 45px;
		width: 100%;
	}
}

@import 'logo.less';

/* Content */
#gk-header {
	background: @lightbg;
	.box-shadow(inset 0 0 3px @lightgrey);
	margin-bottom: 32px;
	padding: 30px 0;
}

#gk-content {
	padding-bottom: 20px;
}

#gk-bottom {
	border-top: 1px solid @lightgrey;
	margin: 30px 0;
	padding: 45px 0 0 0;
}

/* Footer */
body > footer {
	border-top: 1px solid @lightgrey;
	font-size: 0.85*@baseBodyFontSize;
	padding: 12px 0;

	ul {
		float: left;

		li {
			float: left;
			margin-right: 10px;
		}
	}

	a {
		color: lighten(@lighttext, 10%);

		&:active,
		&:focus,
		&:hover {
			background: transparent!important;
			color: @color1;
		}
	}

	.gk-toplink {
		margin-left: 20px;
	}
}

#gk-framework-logo {
	background: url('../images/framework-logo.png') no-repeat 0 0!important;
	clear: both;
	display: block;
	height: 42px;
	margin: 96px auto 0;
	opacity: 0.5;
	padding-bottom: 6px;
	text-indent: -9999em;
	.transition(opacity 0.5s ease-out);
	width: 140px;

	&:hover {
		opacity: 1.0;
	}
}


.gk-disclaimer {
	clear: both;
	text-align: center;
	line-height: 1.4*@baseBodyFontSize
}

footer {
	.gk-toplink i {
		margin-top: -3px;
	}

	.gk-copyrigths {
		color: lighten(@lighttext, 10%);
	}
}

/* Modules */
div.box.dlastrow + div.box {
	margin-left: 0 !important;
	clear: left;
}
div.box.dlastrow {
	clear: right;
}
.box {
	margin-bottom: 35px;

	ul {
		list-style-type: none;
		margin: 0;

		li {
			line-height: 1.5;
			padding: 5px 0;
		}
	}

	.header {
		font-size: @baseHeadersFontSize;
		font-weight: 300;
		margin-bottom: 12px;
	}
}

#gk-bottom .box {
	a {
		color: @textcolor;

		&:active,
		&:focus,
		&:hover {
			color: @darkcolor;
		}
	}

	ul li {
		line-height: 2;
		padding: 0;
	}
}

/* Suffix blue & blue-header */
.box.blue-header {
	border-color: @color1!important;

	.header {
		color: @color1;
	}
}


.box.blue {
	background: @color1;
	.border-radius;
	color: @lightcolor;
	padding: 10px 15px;

	.header {
		color: @lightcolor;
	}
}

.box.blue a {
	color: @verylightcolor1;

	&:active,
	&:focus,
	&:hover {
		color: @lightcolor;
	}
}

/* Suffix red & red-header */
.box.red-header {
	border-color: @color3!important;

	.header {
		color: @color3;
	}

	a {
		color: @color3;

		&:active,
		&:focus,
		&:hover {
			color: @lightcolor3;
		}
	}
}


.box.red {
	background: @color3;
	.border-radius;
	color: @lightcolor;
	padding: 10px 15px;

	.header {
		color: @lightcolor;
	}

	a {
		color: @verylightcolor3;

		&:active,
		&:focus,
		&:hover {
			color: @lightcolor;
		}
	}
}


/* Suffix green & green-header */
.box.green-header {
	border-color: @color4!important;

	.header {
		color: @color4;
	}

	a {
		color: @color4;

		&:active,
		&:focus,
		&:hover {
			color: @lightcolor4;
		}
	}
}


.box.green {
	background: @color4;
	.border-radius;
	color: @lightcolor;
	padding: 10px 15px;

	.header {
		color: @lightcolor;
	}

	a {
		color: @verylightcolor4;
		
		&:active,
		&:focus,
		&:hover {
			color: @lightcolor;
		}
	}
}

/* Suffix yellow & yellow-header */
.box.yellow-header {
	border-color: @color2!important;

	.header {
		color: @color2;
	}

	a {
		color: @color2;

		&:active,
		&:focus,
		&:hover {
			color: @lightcolor2;
		}
	}
}

.box.yellow {
	background: @color2;
	.border-radius;
	color: @lightcolor;
	padding: 10px 15px;

	.header {
		color: @lightcolor;
	}

	a {
		color: @verylightcolor2;

		&:active,
		&:focus,
		&:hover {
			color: @lightcolor;
		}
	}
}

/* Suffix border1 */
.box.border1 {
	border: 1px solid @lightgrey;
	.border-radius;
	padding: 10px 15px;
}

/* Suffix border2 */
.box.border2 {
	border: 3px solid @lightgrey;
	.border-radius;
	padding: 10px 15px;
}

/* Suffix border3 */
.box.border3 {
	border: 2px dashed @lightgrey;
	.border-radius;
	padding: 10px 15px;
}

/* Icons in the header */
.box .header [class^="icon-"], 
.box .header [class*=" icon-"] {
	padding-right: 6px;
}

/* Suffixes hot/popular/new/coming */
.box.hot,
.box.new,
.box.coming,
.box.popular {
	position: relative;

	&:after {
		background: @color3;
		.border-radius;
		color: @lightcolor;
		content: "HOT";
		display: block;
		font-size: 0.55*@baseHeadersFontSize;
		height: 16px;
		line-height: 0.8*@baseHeadersFontSize;
		padding: 0 4px;
		position: absolute;
		right: 5px;
		top: 5px;
		z-index: 1;
	}
}

.box.new:after {
	background: @color1;
	content: "NEW";
}

.box.coming:after {
	background: @color2;
	content: "COMING";
}

.box.popular:after {
	background: @color4;
	content: "POPULAR";
}

.box.red,
.box.blue,
.box.green,
.box.yellow {
	.hot:after,
	.new:after,
	.coming:after,
	.popular:after {
		background: @lightcolor!important;
		color: @color3!important;
		right: 12px!important;
		top: 12px!important;
	}
}

.box.blue {
	.hot:after,
	.new:after,
	.coming:after,
	.popular:after {
		color: @color1!important;	
	}
}

.box.green {
	.hot:after,
	.new:after,
	.coming:after,
	.popular:after {
		color: @color4!important;
	}
}

.box.yellow{
	.hot:after,
	.new:after,
	.coming:after,
	.popular:after {
		color: @color2!important;
	}
}

/* Social icons */
.gk-facebook-icon,
.gk-twitter-icon,
.gk-gplus-icon,
.gk-rss-icon {
	.border-radius(50%);
	display: inline-block;
	float: none!important;
	height: 22px;
	margin: 2px 5px;
	text-indent: -9999px;
	.transition(all 0.3s ease-out);
	width: 22px;

	&:hover {
		background-color: @lightcolor;
		height: 30px;
		margin: 8px 5px;
		width: 30px;
	}
}

.gk-facebook-icon {
	background: @textcolor url('../images/fb_icon.png') no-repeat center center;
}

.gk-twitter-icon {
	background: @textcolor url('../images/twitter_icon.png') no-repeat center center;
}

.gk-gplus-icon {
	background: @textcolor url('../images/gplus_icon.png') no-repeat center center;
}

.gk-rss-icon {
	background: @textcolor url('../images/rss_icon.png') no-repeat center center;
}

#gk-social-icons {
	background: @darkcolor;
	.border-radius(0 3px 3px 0);
	.box-shadow(0 0 6px @darkshadow);
	left: 0;
	padding: 10px 0;
	position: fixed;
	text-align: center;
	top: 40%;
	width: 48px;
	z-index: 2;

	&.right {
		.border-radius(3px 0 0 3px);
		left: auto;
		right: 0;
	}

	p {
		margin: 0!important;
	}
}

/* Userless */
#gkuserless {
	border: 1px solid @lightgrey;
	.border-radius;
	.box-sizing;
	margin: 0 auto 10px auto;
	max-width: 980px;
	padding: 10px 15px;

	> img {
		.border-radius;
		float: left;
		margin-right: 10px;
	}

	> h3 {
		line-height: 1.0;
	}

	> p {
		margin-bottom: 4px;
	}
}

div.userdata span.add-on i {
	margin-right: 6px;
	top: 0px;
}
/* Login popup */
#gk-user-area {
	float: right; 
	position: relative;
	margin-left: 15px;
	
	> a {
		color: @textcolor;
		padding: 4px 8px;
		font-size: 1.1*@baseBodyFontSize;
		min-height: 67px;
		line-height: 67px;
		border: 1px solid @lightgrey;
		padding: 8px 10px;
		.border-radius;
		.transition(all 0.5s ease-out);
		
		&:hover {
			border: 1px solid @lightcolor1;
		}
	}
}

button i,
span i { top: 0!important; margin-right: 5px}

#loginModal {
	max-width: 420px;
	margin-left: -200px;
	.btn {
		padding: 11px 19px; 
		font-size: 1.25*@baseBodyFontSize;margin: 0!important; 
		.border-radius(6px); 
	}
	.userdata {
		padding: 0 15px;
	}
	#form-login-remember {
		margin: 5px 10px;
	}
	.usermenu { 
		width: 45%; 
		float: right;
	}
	ul.nav.menu { 
		float: left; 
		width: 55%; 
		margin-left: 20px;
	}
	ul.nav {
		a:hover {
			background: none;
		}
		li { 
			padding: 8px; 
			font-size: 1.1*@baseBodyFontSize;
		}
	}
	.modal-header {
		h3 { 
			font-size: 1.5*@baseHeadersFontSize;
			padding: 8px 20px;
			}
		small {
			font-size: @baseHeadersFontSize;
		}
		button {
			margin-top: 12px!important; 
			margin-right: 10px;
		}
	}
	.modal-body {
		h3.header {
			display: none;
		}
		#form-login-username label,
		#form-login-password label {
			width: 100%; 
			clear: both;
		}
		input[type=text],
		input[type=password] { 
			width: 95%; 
			clear: both; 
			margin-top: 5px; 
			height: 30px; 
			line-height: 30px;
		}
	}
	.modal-footer {
		a { 
			color: @textcolor;
			
			&:hover {
				text-decoration: underline;
			}
		}

		ul {
			margin-left: 20px;

			li { 
				display: inline-block; 
				float: left; 
				margin-right: 15px; 
				padding-bottom: 5px; 
				font-size: 90%;
			}
		}	
	}
}

.hasTooltip {
	display: block!important;
}