@base: 24px;
@border-color: #B2B;
@navselect: #039A9C;
@navselect: #BA980F;
@navtext: #0BF5F8;


@darkstripe: #094B4E;
@lightstripe: @navselect * 1.2;
@linkcolor: @darkstripe * 0.8;
@dateline: @navselect * 1.2;

@linkhovercolor: @darkstripe;
@about: #232323;
@footer: @about;
@hrcolor: #ccc;

@formlabelcolor: @darkstripe;
@logotext: #007B6E;

@pagebg: #fff;
@descbg: #222;
@white: #fff;
@black: #000;
@col_border: #C5E3E0;
@top_nav_h: 40px;

@titlecolor: #094B4E;

@h1: 25px;
@h2: 23px;
@h3: 21px;
@h4: 19px;
@h4b: 18px;
@h5: 17px;
@h5b: 16px;
@h6: 15px;
@h6b: 14px;
@h7: 13px;

.wider() {
	margin: 0px -10px;
}

.clear20 {
	clear: both;
	height: 20px;
}

.clear10 {
	clear: both;
	height: 10px;
}

body {
	background-color: #656565;
	overflow-y: scroll;
}

a {
	text-decoration: none;
	color: @linkcolor;
	
	&:hover {
		text-decoration: underline;
		color: @linkcolor;
	}
}
h1, h2, h3, h4, h5, h6 {
	margin-bottom: 10px;
	color: @titlecolor;
	& a, & a:hover {
		color: @titlecolor;
	}
}

.abstract h3 {
	font-size: @h5;
	margin-bottom: 10px;
}

.clear_10 {
	clear: both;
	height: 10px;
}

#main_column {
	background-color: @pagebg;
	margin-bottom: 10px;
	/* wider */
	padding: 0 10px;
	box-shadow: 0 0 10px rgba(0,0,0,.4);
	margin-bottom: 30px;
}

#banner {
	.wider();
	background-image: url('../img/bannerbg.png');
	height: 120px;
	#logo {
		background: url('../img/ecglogo.png') no-repeat 20px 20px;
		width: 400px;
		height: 120px;
	}
}

#top_nav {
	/* wider */
	.wider();
	ul {
		margin-bottom: 0px;
		list-style-type: none;
		height: @top_nav_h;
		background: url(../img/pattern/gray-hatch.png);
		li {
			line-height: @top_nav_h;
			height: @top_nav_h;
			font-size: @h7;
			font-weight: bold;
			float: left;
			
			margin: 0;
			a, a:hover {
				display: block;
				color: @navtext;
				padding: 0 20px;
				text-transform: uppercase;
				text-decoration: none;
			}
			&.selected, &:hover  {
				color: @white;
				background-color: @navselect;
			}
			&.selected a,&:hover a{
				color: @white;
			}
		}
	}
}

.dateline {
	color: #aaa;
	margin-top: -12px;
	margin-bottom: 10px;
	font-size: 12px;
}

.article, .abstract {
	margin-top: 15px;
	.caption {
		font-size: 11px;
		margin-bottom: 20px;
	}
	
	
	
	blockquote {
		margin-left: 80px;
	}
	sup {
		position:relative;
		top: -5px;
		left: 2px;
		font-size: 10px;
		color: #094B4E;
		font-weight: bold;
	}

	sup div {
		position: absolute;
		left: -20px;
		top: 0px;
		width: 200px;
		display: none;
		background: white;
		border: 1px solid black;
		padding: 10px 20px;
		z-index:1;
		background: #efe;
		border-radius: 10px;
		box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
		color: #000;
		font-weight: normal;
		font-size: 11px;
	}

	sup:hover div {
		display:block;
	}
}

.ad_pic {
	margin-top: 15px;
}

#home_about_pic {
	.wider();
	background: url(../img/banners/aseat.jpg) no-repeat right 50%;
}

#home_about {
	background-color: @about;
	width: 340px;
	color: @white;
	font-size: @h5b;
	font-weight: bold;
	.inner {
		padding: 20px;
	}
}

#header {
  color: black;
  border: 1px solid @border-color + #222222;

  .navigation {
    font-size: @base / 2;
    a {
    text-decoration: underline;
    }
  }
  .logo {
    width: 300px;
    :hover { text-decoration: none }
  }
}

.col {
	&.news_front {
		.abstract {
			padding: 0px;
			h3 {
				margin-bottom: 7px;
				font-size: @h5b;
				line-height: 1.2;
			}
		}		
	}
	.count_list {
		margin-bottom: 0;
	/*	list-style-type: none; */
		li {
			margin-left: 20px;
			text-indent: 0px;
			padding: 3px 0px;
		}
	}
	.title_bar {
		height: 30px;
		background: @navselect;
		margin: 20px 0 5px;
		&.no_margin_top {
			margin-top: 0px;
		}
		position: relative;
		h6 {
			background-color: @black;
			float: left;
			color: @white;
			line-height: 30px;
			margin: 0;
			padding: 0 20px;
			text-transform: uppercase;
			a {
				color: white;
				display: block;
				margin: 0 -20px;
				padding: 0 20px;
			}
		}
		.edit_links {
			background-color: @lightstripe;
			padding: 0 .5em;
			bottom: 5px;
			a {
				color: white;
				font-weight: bold;
			}
		}
		
		
	}
	.outer {
		background: url(../img/pattern/pale-hatch.png);
		padding: 10px;
	}
	
	.inner {
		padding: 10px 0px 10px;
		background-color: @white;
		border: 0px solid @col_border;
		position: relative;
	}
	
	.abstract {
		border-bottom: 1px solid @hrcolor;
		padding: 0px;
	}
	
	.outer .inner {
		border: 0px solid black;
	}	
}

.edit_links {
	position: absolute;
	bottom: 2px;
	right: 5px;
}

.form {
	margin-top: 20px;
	h3 {
		margin-bottom: 10px;
	}
}

.paging_r {
	text-align: right;
	color: #aaa;
}

.paging_l {
	text-align: left;
	color: #aaa;
}

span.cke_skin_kama {
	padding: 0px !important;
	border: 0px solid black;
}

.button {
	display: inline-block;
	background: #D4D0C8;
	padding-left: 1em;
	padding-right: 1em;
	margin: 5px 0;
	font-size: @h6;
	cursor: default;
}

.vimeo {
	margin: 0px 0 15px;
	display: block;
}

.video {
	.inner {
		padding: 20px 0px;
	}
}

#footer {
	.wider();
	background: @about;
	padding: 10px 10px;
	line-height: 40px;
	cursor: pointer;
	color: #4F4F4F;
	.partners {
		float: right;
	}
	.ecm {
		background: url(../img/ecm-white.png) no-repeat;
		float: right;
		height: 40px;
		a {
			color: #4F4F4F;
		}
	}
	.pshift {
		background: url(../img/pshift-white.png) no-repeat 0 50%;
		padding-left: 10px;
		float: right;
		width: 137px;
		margin-left: 5px;
		height: 40px;
		a {
			color: #4F4F4F;
		}
	}
	.small_login {
		text-align: left;
		float: left;
		padding-right: 10px;
		a {
			color: @white;
		}
	}
}

.page_title {
	margin-top: 20px;
}

.form_grey {
	padding: 0px 7px 4px;
	background: #f7f7f7;
}

.pagination.top {
	border-bottom: 1px solid #ccc;
	margin-bottom: 15px;
}

.pagination.bottom {
	border-top: 1px solid #ccc;
	margin-top: 15px;
}

.ecm {
	background: url(../img/ecm-white.png) no-repeat;
	color: #4F4F4F;
	padding-left: 45px;
	line-height: 45px;
	a {
		color: #4F4F4F;
	}
}