@import url("reset.css");
@import url("fonts.css");

body {
	font-family: 'Signika', Helvetica, sans-serif;
	font-size: 16px;
	line-height: 1.4;
	color: #555;
	font-weight: 400;
}

a  {
	color: #444;
}
a:hover {
	opacity: 0.7;
}

h1,h2,h3,h4,h5 {
	font-size: 1em;
}

/* Colors 

ZDK
#0c2d89 

EXIT
#007c30

HAYAT
#729835

*/

#wrap {
	max-width: 960px;
	min-width: 480px;
	margin: 0 auto;
}

header {
	background-image: none !important;
}

#nav-key {
	float: left;
	width: 100%;
	padding-bottom: 0.5em;
}

#nav-key h1 {
	float: left;
	margin: 0.5em 1em 0;
	font-size: 0.85em;
	line-height: 1.5;
	font-weight: 400;
}
#nav-key h1 strong {
	font-weight:  600;
}
#nav-key h1 a span {
	color: #999;
}
#nav-key h1 a:hover,
#nav-key li a:hover {
	opacity: 0.8;
}
#nav-key ul {
	float: left;
	margin: 0.5em 0 0 0.5em;
	font-size: 0.85em;
}

#nav-key li {
	display:  inline;	
	line-height: 1.5;
	margin: 0 0 0 0.5em;
}

/* Tiles */

div#nav-tiles {
	float: left;
	width: 100%;
	margin: 0 0 2em 0;
	background: none;
}

#nav-tiles h1 {
	font-size:  1.125em;
	line-height:  25px;
	color: #fff;
	margin: 1em 1em 0;
	font-weight: 400;
	color: #fff;
}
#nav-tiles h1 strong {
	font-size: 1.125em;
	font-weight: 600;
}

div.tile {
	float: left;
	width: 100%;
	height: 9em;
	opacity: 0.85;
	position: relative;
	top: 0;
	-webkit-transition: top 0.5s ease;
       	-moz-transition: top 0.5s ease;
        	-ms-transition: top 0.5s ease;
         	-o-transition: top 0.5s ease;
            transition: top 0.5s ease;
}

.zdk-bg 	{background:  #0c2d89;}
.exit-bg 	{background: #007c30;}
.hayat-bg 	{background: #729835;}


a:hover div.tile {
	opacity: 0.93;
	position: relative;
	top: 0.75em;
}

div.triang {
	display: none;
}


/* #main */

#main {
	clear: both;
	margin: 0 0.5em;
}

p a:hover {
	border-bottom: 1px solid #666;
}


div.teaser-text {
	border-left: 0.5em solid #0c2d89;
	border-bottom:  0.5em solid #fff;
	padding-left: 0.75em;
}

div.zdk h2,
div.zdk a {
	color:  #0c2d89;
}
div.zdk p a:hover {
	border-bottom: 1px solid #0c2d89;
}
div.zdk div.teaser-text {
	border-left: 10px solid #0c2d89;
}

p.more {
	text-align: right;
}

#link-block {
	margin: 5em 0;
}
#link-block div {
	float: left;
	margin-bottom: 5em;
}
#link-block a:hover {
	opacity: 0.8;
}


/* ZDK Specific Colors */

div.zdk h2,
div.zdk a {
	color:  #0c2d89;
}
div.zdk p a:hover {
	border-bottom: 1px solid #0c2d89;
}
div.zdk div.teaser-text {
	border-left: 10px solid #0c2d89;
}

/* footer */

footer {
	font-size: 0.9em;
	clear: both;
	float: left;
	width: 100%;
	background: #fff;
	padding: 1em 0 3em 0;
	margin-top: 3em;
	border-top: 1px solid #eee;
}
footer ul {
	float: left;
	margin: 0 0 0.5em 1em;
}

footer li {
	display: inline;
	margin-right: 0.75em;
}
footer li a {
	color: #777;
}
footer li a:hover {
	opacity: 0.7;
}
footer ul:nth-child(2) li a {
	font-weight: 300;
	color: #999;
}
footer ul:nth-child(2) li a span {
	color: #ccc;
}



/* 
Media Queries 
-----------------------------*/

@media only screen and (min-width: 481px) {

	#wrap {
		max-width: 960px;
		margin: 0 auto;
	}

/* #nav-key */


	#nav-key h1 {
		float: left;
		margin: 0.5em 0 0 0;
		font-size: 1em;
	}

	#nav-key h1 a {
		color: #777;
		display: inline;
		padding: 0;
		margin: 0 0 0 1em;
		background: none;
		font-size: 1em;
	}
	#nav-key h1 a span {
		font-size: 0.8em;
		color: #999;
	}

	#nav-key h1 strong {
		font-weight:  600;
	}

	#nav-key ul {
		float: right;
		font-size: 1em;
		margin: 0.5em 1em 0 0.5em;
	}

	#nav-key li {
		display:  inline;	
		line-height: 1.5;
		margin: 0 0 0 0.5em;
	}

/* nav-tiles */

	div#nav-tiles {
		float: left;
		width: 100%;
		min-width: 720px;
		background: url('../img/header-960x280.jpg') no-repeat 0 0;
		background: url('/images/1.jpg') no-repeat 0 0;
	}

	div#nav-right {
		float: right;
		min-width: 470px;
	}
	div.tile {
		width: 210px;
		height: 310px;
		margin-left: 1em;
	}

	div.tiles-triangle {
		position: absolute;
		bottom: 0;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0 0 1em 210px;
		border-color: transparent transparent #fff transparent;
		opacity: 1;
	}

	footer {
		font-size: 1em;
		width: 100%;
		max-width: 960px;
		padding: 1em 0 4em 0;
	}


}