/*
 * UI STYLE FOR KURDC
 * Kathmandu University Research, Development and Consultancy.
 *
 * GRIDS BASED ON 1200PX.
 * HILSON SHRESTHA | http://hilsonshrestha.com.np
 * ROHIT SHRESTHA  | http://shrestharohit.com.np
 */

@font-face {
	font-family: 'Adelle Sans';
	font-style: normal;
	font-weight: 400;
	src: url(../fonts/adellesans400.woff) format('woff');
}

@font-face {
	font-family: 'Adelle Sans';
	font-style: normal;
	font-weight: 300;
	src: url(../fonts/adellesans300.woff) format('woff');
}

@font-face {
	font-family: 'Adelle Sans';
	font-style: normal;
	font-weight: 700;
	src: url(../fonts/adellesans700.woff) format('woff');
}

html, body {
	padding: 0;
	margin: 0;
}

body {
	background: #fff;
	font-family: 'Adelle Sans';
	font-size: 14px;
	line-height: 1.5rem;
}

	a {
		text-decoration: none;
		color: #4A7B9D;
	}

	a:hover {
		color: #000;
	}

	.p10 {
		padding: 10px;
	}

	.mid {
		margin: 0 auto;
		position: relative;
		width: 1200px;
	}

	.mid:after {
		content: " ";
		clear: both;
		display: block;
	}

	#brandContainer {
		z-index: 20;
	}

		#brand {
			position: absolute;
			left: 0;
			top: 0;
			height: 216px;
			width: 300px;
			margin: 0 10px;
			box-sizing: border-box;
			background: #eee;
			border: 1px solid #DDD;
			border-top: 0;
		}

			#kulogoContainer {
				position: absolute;
				border :1px solid #DDD;
				border-top: 0;
				border-left: 0;
				box-sizing: border-box;
				height: 80px;
			}

				#kulogo {
					height: 60px;
					width: 60px;
					background-image: url('../img/kulogo.png');
					background-size: contain;
					background-position: center;
					background-repeat: no-repeat;
					box-sizing:border-box;
					left: 0;
					top: 0;
				}

			#kurdclogo {
				position: absolute;
				left: 80px;
				border: 1px solid #DDD;
				border-top: 0;
				border-right: 0;
				width: 218px;
				box-sizing:border-box;
				height: 80px;
				background-image: url('../img/kurdc.png');
				background-position: center left;
				background-repeat: no-repeat;
			}

			#kurdcText {
				margin-left: 80px;
				margin-top: 90px;
				color: #656176;
			}

			#brand a .p10:hover {
				background-color: #f6f6f6;
			}

	#pageNav {
		background: #eee;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 36px;
		border-bottom: 1px solid #DDD;
		z-index: 10;
	}

		#navBrand {
			position: absolute;
			left: 0;
			top: 0;
			width: 320px;
			height: 36px;
			padding: 0 10px;
			box-sizing: border-box;
		}

		#navBrandkulogoHolder {
			height: 36px;
			width: 56px;
			position: absolute;
			left: 10px;
			top: 0;
			border-left: 1px solid #DDD;
		}
		
		#navBrandkulogo {
			height: 36px;
			width: 36px;
			margin-left: 10px;
			background-image: url(../img/kulogo.png);
			background-size: contain;
			background-repeat: no-repeat;
		}
		
		#navBrandkurdclogo {
			position: absolute;
			height: 36px;
			width: 242px;
			left: 66px;
			background-image: url(../img/kurdc.png);
			background-size: contain;
			background-position: center left;
			background-repeat: no-repeat;
			border-left: 1px solid #DDD;
			border-right: 1px solid #DDD;
		}

		#navBrandkulogoHolder:hover,
		#navBrandkurdclogo:hover {
			background-color: #f6f6f6;
		}

		#pageNav ul.navBar {
			line-height: 36px;
			text-transform: uppercase;
			position: relative;
			padding: 0 10px;
			z-index: 3;
			margin-left: 330px;
		}

			#pageNav ul.navBar li {
				box-sizing: border-box;
				float: left;
			}

			#pageNav ul.navBar li a {
				display: block;
				width: 160px;
				color: #222;
				text-decoration: none;
				padding: 0 10px;
				box-sizing: border-box;
				margin: 0;
				border-left: 1px solid #DDD;
				background: #eee;
			}

			#pageNav ul.navBar li:first-child a {
				width: 140px;
			}
	
			#searchBarContainer {
				position: absolute;
				top: 0;
				right: 10px;
				z-index: 3;				
			}
				#searchBar {
					border-left: 1px solid #DDD;
					border-right: 1px solid #DDD;
					box-sizing: border-box;
					width: 230px;
					display: block;
				}

					#searchBar input {
						width: 100%;
						box-sizing: border-box;
						height: 36px;
						border: none;
						outline: none;
						padding: 0 10px;
						background: transparent;
					}

					#searchBar input:focus {
						background: #f6f6f6;
					}

			#pageNav ul.navBar li a:hover {
				background: #f6f6f6;
				color: #000;
			}

	#leftBar {
		position: relative;
		width: 300px;
		left: 0;
		top: 0;
		float: left;
		background: #fff;
		z-index: 5;
		box-sizing: border-box;
		padding: 0;
		padding-top: 174px;
		margin: 10px;
	}

		#leftBar h2 {
			padding: 0;
			margin: 10px 0 5px;
		}

		#leftBar .navBar {}

			#leftBar .navBar li {
				display: block;
				font-size: 15px;
				line-height: 1.5rm;
			}

				#leftBar .navBar li a {
					display: block;
					padding: 8px 10px 4px;
					background: #eee;
					border: 1px solid #DDD;
				}

				#leftBar .navBar li + li a {
					border-top: 0;
				}

				#leftBar .navBar li a:hover {
					color: #000;
					background: #f6f6f6;
				}

		#leftBar .section {
			margin: 20px 0;
		}

	.page {
		position: relative;
		float: right;
		width: 880px;
	}

		.articleHolder {
			width: 640px;
			background: #fff;
			float: left;
		}

			.articleHolder .coverImage {
				height: 250px;
				margin: 0 0px -10px -10px;
				background: #ddd;
				background-size: cover;
				background-position: center;
			}

			.readContent {
				width: 560px;
				font-size: 16px;
				padding: 10px;
				margin: 10px;
				margin-right: 0;
				box-sizing: border-box;
				background: #fff;
			}

				.readContent h1 {
					font-size: 1.5em;
					font-weight: 700;
				}

				.readContent img {
					max-width: 100%;
				}

				.readContent .pubDate {
					color: #999;
					font-size: .85em;
				}

			
			ul.expandList {
				margin: 0;
				padding: 0;
				list-style: none;
				border-top: 1px solid #DDD;
			}
			
				ul.expandList > li > .listHead {
					background: #eee;
					color: #4A7B9D;
					color: #4A7B9D;
					padding: 8px 10px 5px;
					border: 1px solid #DDD;
					border-top: 0;
					cursor: pointer;
					font-weight: 700;
				}

				ul.expandList > li > .listHead:hover {
					background: #f6f6f6;
					color: #000;
				}

				ul.expandList > li > .listContent {
					background: #FFF;
					padding: 5px 10px;
					border: 1px solid #DDD;
					border-top: 0;
					display: none;
					opacity: .5;
				}

				ul.expandList > li.expanded > .listHead {
					background: #F6F6F6;
					color: #000;
				}

				ul.expandList > li.expanded > .listContent {
					opacity: 1;
					transition: opacity 500ms 500ms;
				}
				
				ul.expandList > li > .listContent h3 {
					font-weight: 700;
				}



				.galleryContainer {
					position: relative;
					margin: 0 0 36px;
					overflow: hidden;
				}

					.galleryContainer img {
						display: block;
					}


					.caption {
						position: absolute;
						box-sizing: border-box;
						width: 100%;
						bottom: -36px;
						opacity: 0;
						background: rgba(255, 255, 255, .9);
						padding: 10px;
						-wehkit-transition: 200ms;
						transition: 200ms;
					}

					.galleryContainer:hover	.caption {
						bottom: 0;
						opacity: 1;
					}


		#rightBar {
			position: relative;
			float: right;
			width: 240px;
			padding-right: 10px;
			background: #fff;
			box-sizing: border-box;
			z-index: 2;
			border-left: 1px dotted #DDD;
		}

			#rightBar h2 {
				padding-left: 10px;
				margin-top: 30px;
				margin-bottom: 5px;
			}

			.latest ul {
				padding: 0;
				margin: 0;
				list-style: none;
			}
			
			.latest ul li a {
				padding: 10px 10px;
				display: block;
				line-height: 1.5em;
			}

			.latest ul li + li a {
				border-top: 1px dotted #DDD;
			}

			.latest ul li a:hover {
				background: #f6f6f6;
			}

footer {
	clear: both;
	margin-top: 18px;
	position: relative;
}

	footer .mid {
		border-top: 1px solid #eee;
		padding-top: 18px;
	}

	#footerBrandContainer {
		float: left;
		width: 230px;
		height: 250px;
		margin-right: 10px;
		background-color: #EEE;
		padding: 10px;
		box-sizing: border-box;
	}

		#footerkulogo {
				height: 60px;
				width: 60px;
				background-image: url('../img/kulogo.png');
				background-size: contain;
				background-position: center;
				background-repeat: no-repeat;
				box-sizing:border-box;
				float: left;
		}

			#footerkurdclogo {
				background-image: url('../img/kurdc.png');
				background-position: center left;
				background-repeat: no-repeat;
				width: 150px;
				height: 60px;
				float: left;
			}

		#footerBrand:after {
			content: " ";
			position: relative;
			display: block;
			clear: both;
		}

	footer ul.navBar {
		padding: 10px;
	}

		footer .fnav {
			width: 240px; float: left;
		}

			footer ul.navBar li {
				display: block;
			}

			footer ul.navBar li a:hover {
				text-decoration: underline;
			}




	.slider {
		position: relative;
		overflow: hidden;
		margin: 0 auto;
	}

		.slider ul {
			position: relative;
			margin: 0;
			padding: 0;
			height: 180px;
			list-style: none;
		}

			.slider ul li {
				position: relative;
				display: block;
				float: left;
				margin: 0;
				padding: 0;
				width: 300px;
				height: 180px;
				background: #ccc;
				text-align: center;
				/*line-height: 300px;*/
			}

				.slider ul li > div {
					background-size: cover;
					height: 180px;
				}

		a.control_prev, a.control_next {
			position: absolute;
			top: 40%;
			z-index: 999;
			display: block;
			padding: 4% 3%;
			width: auto;
			height: auto;
			background: #2a2a2a;
			color: #fff;
			text-decoration: none;
			font-weight: 600;
			font-size: 18px;
			opacity: 0;
			cursor: pointer;
			-webkit-transition: 0.2s ease;
			transition: 0.2s ease;
		}

		.slider:hover a.control_prev,
		.slider:hover a.control_next {
			opacity: .75;
		}

		a.control_prev:hover, a.control_next:hover {
			opacity: 1 !important;
		}

		a.control_prev {
			border-radius: 0 2px 2px 0;
		}

		a.control_next {
			right: 0;
			border-radius: 2px 0 0 2px;
		}


	.searchContainer, .newsContainer {
		padding: 10px 0;
		clear: both;
	}

		.searchContainer .searchTitle,
		.newsContainer .newsTitle {
			font-size: 18px;
			line-height: 28px;
		}

	.searchContainer + .searchContainer,
	.newsContainer + .newsContainer {
		border-top: 1px dotted #DDD;
	}

	.searchContainer .thumbnail, .newsContainer .thumbnail {
		float: right;
		height: 162px;
		width: 230px;
		margin: 0 0 10px 20px;
		background-size: cover;
		background-position: center;
	}