@charset "utf-8";
/* CSS Document */

	
@font-face {/* for all heading */
	font-family:melbourne;
	src:url(../font/Melbourne_reg.otf);
	}
	
@font-face { /* for all text */
	font-family:ebrima;
	src:url(../font/ebrima.ttf);
	}
	
::-moz-selection {
	background: #ffb7b7; /* Firefox */
	}

::selection {
	background:#FFD2D2;
	}
	
html, body {
	margin:0;
	font-family:ebrima, Arial, Helvetica, sans-serif;
	height:100%;
	background-image:url(../image/bg.png);
	}
	
/*TEXT -----------------*/
h1,h2,h3,h4 {
	font-weight:normal;
	font-family:melbourne, Arial, Helvetica, sans-serif;
	color:#333;
	}
	
h2,h3,h4 {
	font-weight:bold;
	margin:0;
	}
	
p {
	font-size:16px;
	text-align:justify;
	line-height:30px;
	color:#696969;
	}

.notintro {
	font-size:14px;
	line-height:28px;
	margin:0;
	}
	
.special {
	font-size:14px;
	line-height:16px;
	margin:0;
	}
	
a.more {
	display:inline-block;
	float:right;
	font-size:12px;
	color:#EE2930;
	font-weight:bold;
	}
	
a {
	text-decoration:none;
	border:none;
	color:#2E3192;
	}
	
a:hover {
	color:#ED1D24;
	}

.clearfix:before,  
.clearfix:after {  
    content: " ";  
    display: table;  
}
.clearfix:before, .clearfix:after {  
    clear: both;  
}  
.clearfix {  
    *zoom: 1;  
}

.min {
	margin:0 auto;
	width:1003px;
	position:relative;
	}



/*PART B---------------------*/
#wrapper {
	min-height:100%;
	position:relative;
}
	
header {
	border-top:2px solid red;
	border-bottom:1px solid red;
	padding:20px 0;
	background-color:#FFF;
	height:100px;
	}
	
#logo {
	float:left;
	}

#page {
	background-color:#FFF;
	min-height:250px;
	box-shadow:0 0 8px #CCC;
	margin-top:-18px;
	margin-bottom:30px;
	padding:10px;
	overflow:auto;
	}
	
#banner {
	height:388px;
	overflow:hidden;
	position:relative;
	}

footer {
	position:absolute;
	bottom:0;
	padding-bottom:20px;
	}
	
footer p {
	font-size:14px;
	}
	
footer a {
	color:#666;
	}
	
footer a:hover {
	color:#0C0;
	}
	
.social {
	float:left;
	display:inline-block;
	margin-left:5px;
	margin-bottom:3px;
	height:24px;
	/*opacity for transition */
	opacity:.5;
	transition: opacity .25s ease-in-out;
	
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
	filter: gray; /* IE6-9 */
	-webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
	}
	
.social:hover {
	opacity:1;
	filter: gray; /* IE6-9 */
	-webkit-filter: grayscale(0%); /* Chrome 19+ & Safari 6+ */
	}
	
.facebook {width:11px;	background:url(../image/header_social.png) 0 0;	}
.twitter {	width:31px; background:url(../image/header_social.png) 64px 0;}
.linkedin {	width:26px; background:url(../image/header_social.png) 26px 0;}


/*PAGE LOADING SPINNER -------------------------------------------*/
	/* Start by setting display:none to make this hidden.
	   Then we position it in relation to the viewport window
	   with position:fixed. Width, height, top and left speak
	   speak for themselves. Background we set to 80% white with
	   our animation centered, and no-repeating */
	.modal {
		display:    none;
		position:   fixed;
		z-index:    1000;
		top:        0;
		left:       0;
		height:     100%;
		width:      100%;
		background: rgba( 255, 255, 255, .8 ) 
					url('http://i.stack.imgur.com/FhHRx.gif') 
					50% 50% 
					no-repeat;
	}
	
	/* When the body has the loading class, we turn
	   the scrollbar off with overflow:hidden */
	body.loading {
		overflow: hidden;   
	}
	
	/* Anytime the body has the loading class, our
	   modal element will be visible */
	body.loading .modal {
		display: block;
	}

/*STYLING SCROLLBARS -------------------------------------------*/
	::-webkit-scrollbar {
		width: 12px;
	}
	 
	::-webkit-scrollbar-track {
		background-color:#CCCCCC;
		border-radius: 10px;
	}
	 
	::-webkit-scrollbar-thumb {
		border-radius: 10px;
		background-color:#EE2930; 
	}


/* Preloader --------------------------------------------------------------------*/
#preloader {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:white; /* change if the mask should have another color then white */
    z-index:99; /* makes sure it stays on top */
}

#status {
    width:200px;
    height:200px;
    position:absolute;
    left:50%; /* centers the loading animation horizontally one the screen */
    top:300px; /* centers the loading animation vertically one the screen */
    background-image:url(../image/load.gif); /* path to your loading animation */
    background-repeat:no-repeat;
    background-position:center;
    margin:-100px 0 0 -100px; /* is width and height divided by two */
}