/*
	CSS file for Kalibra
*/

@import url(http://fonts.googleapis.com/css?family=Roboto:300);


/*	General	
------------------------------*/
	
	* {
		padding: 0;
		margin: 0;
		outline: none;
	}
	
	body {
		padding-bottom: 25px;
		background: #3d4b54 url('images/bg.png') no-repeat top center;
	}
	
		
	.pull-left {
		float: left;
	}
	
	.pull-right {
		float: right;
	}
	
	.clearfix {
		clear: both;
	}
	
	.container {
		width: 540px;
		margin: 0 auto 0 auto;		
	}
	
	
	
/*	Header
------------------------------*/
	
	.header {
		height: 405px;
		overflow: hidden;
		position: relative;
	}
	
	.header .logo {
		text-align: center;
		margin: 88px 0 53px 0;
	}
	
	.header p {
		font: 300 12px/13px Roboto, Arial, Helvetica, sans-serif;
		text-shadow: 1px 1px 0px #354149;
		text-align: center;
		color: #778e9c;
	}
	
	.header ul.flags {
		overflow: hidden;
		position: relative;
		margin: 22px 0 53px 0;
		list-style: none;
	}
	
		.header ul.flags li {
			float: left;
			margin-left: 11px;
		}
		
		.header ul.flags li:first-child {
			margin-left: 0px;
		}
		
		.header ul.flags li img {
			-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";	
			filter: alpha(opacity=40);			
			-moz-opacity: 0.4;
			-khtml-opacity: 0.4;
			opacity: 0.4;
		}
		
		.header ul.flags li a.active img {
			-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";	
			filter: alpha(opacity=100);			
			-moz-opacity: 1;
			-khtml-opacity: 1;
			opacity: 1;
		}
	
	

/*	Tiles
------------------------------*/
	
	.inner {
		height: 360px;		
		overflow: hidden;
		position: relative;
	}
	
	.tile {
		float: left;
		width: 150px;
		height: 150px;
		padding: 10px;
		margin: 0 0 10px 10px;
		cursor: pointer;
		text-decoration: none;
	}
	
		.tile-inner {
			width: 150px;
			height: 150px;
			
			position: relative;
		}
		
		.tile-inner .text {
			color: #f2f2f2;
			text-align:center;
			text-shadow: 1px 1px 0px rgba(0, 1, 1, 0.2);
			font: 11px Arial, Helvetica, sans-serif;
			font-weight:bold;
			margin:0px -15px;
		}
		
		.tile-inner .hover {
		display:table-cell;
			position: absolute;
			top: 10px;
			left: 0px;
			margin:30px 0px 0px 0px;
			height:110px;
			overflow: hidden;
		}
		.tile-inner .hover img{
		width:150px;
		display:block;
			margin:-30px 0px 0px 0px;

		}
	
	.tile.first {
		margin-left: 0px;
	}
	
	.tile-bg-1 { background: url('images/tile-bg-1.png') no-repeat top left; background-size:cover; }
	.tile-bg-2 { background: url('images/tile-bg-2.png') no-repeat top left; background-size:cover; }
	.tile-bg-3 { background: url('images/tile-bg-3.png') no-repeat top left; background-size:cover; }
	.tile-bg-4 { background: url('images/tile-bg-4.png') no-repeat top left; background-size:cover; }
	.tile-bg-5 { background: url('images/tile-bg-5.png') no-repeat top left; background-size:cover; }
	.tile-bg-6 { background: url('images/tile-bg-6.png') no-repeat top left; background-size:cover; }
	
	.tile-fixed .text {
		line-height: 100%;
		padding-top: 118px;
	}
	
	.tile-fixed .hover {
		top: -32px;
		display: block;
	}