@font-face {
    font-family: 'BebasNeueRegular';
    src: url('../fonts/BebasNeue-webfont.eot');
    src: url('../fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/BebasNeue-webfont.woff') format('woff'),
         url('../fonts/BebasNeue-webfont.ttf') format('truetype'),
         url('../fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Discognate';
    src: url('../fonts/disco.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Droid Sans";
    font-style: normal;
    font-weight: 400;
    src: local("Droid Sans"), local("DroidSans"), url("http://themes.googleusercontent.com/static/fonts/droidsans/v3/s-BiyweUPV0v-yRb-cjciBsxEYwM7FgeyaSgU71cLG0.woff") format("woff");
}
@font-face {
    font-family: "Droid Serif";
    font-style: normal;
    font-weight: 400;
    src: local("Droid Serif"), local("DroidSerif"), url("http://themes.googleusercontent.com/static/fonts/droidserif/v3/0AKsP294HTD-nvJgucYTaIbN6UDyHWBl620a-IRfuBk.woff") format("woff");
}

@font-face {
  font-family: 'Monda';
  font-style: normal;
  font-weight: 400;
  src: local('Monda Regular'), local('Monda-Regular'), url(http://themes.googleusercontent.com/static/fonts/monda/v1/VLv9RwOO7jtRO3Gv5AvOIw.woff) format('woff');
}

@font-face {
    font-family: "Titillium";
    font-style: normal;
    font-weight: 400;
    src: local("Titillium Web"), local("TitilliumWeb-Regular"), url("http://themes.googleusercontent.com/static/fonts/titilliumweb/v1/7XUFZ5tgS-tD6QamInJTcdASgiSiazNVaMZaV9DKExs.woff") format("woff");
}

@media screen and (max-width: 950px) {
	#imagesbox {
		width: 860px;
	}
}

@media screen and (min-width: 951px) and (max-width: 1090px) {
	#imagesbox {
		width: 145px;
	}
}

@media screen and (min-width: 1091px) and (max-width: 1230px) {
	#imagesbox {
		width: 290px;
	}
}

@media screen and (min-width: 1231px) and (max-width: 1370px) {
	#imagesbox {
		width: 430px;
	}
}

@media screen and (min-width: 1371px) {
	#imagesbox {
		width: 580px;
	}
}

/* CSS reset */
html,body {
	margin:0;
	padding:0;
	height:100%;
	background-color:white;
}

.clr{
	clear: both;
}

ol,ul,li,h3 {
	list-style:none;
	margin:0;
	padding:0;
}

h2 {
	font-size:45pt;
	line-height: 50pt;
	margin:0;
	padding:0;
}

fieldset,img { 
	border:0;
}

q:before,q:after {
	content:'';
}
abbr,acronym { border:0;
}
/* General Demo Style */
body{
	font-family: Arial,Verdana,Geneva,sans-serif;
	font-size:14px;
	overflow-y: scroll;
	overflow-x: scroll;
	cursor:url(../images/arato_ollo.gif),url(../images/arato_ollo.cur),auto;
	/*cursor:crosshair;*/
}

a{
	color: black;
	text-decoration: none;
}

#aratologotopcenter {
	position:fixed;
	right:50%;
	top:10%; 
	width:387px;
	height:110px;
	margin-right:-193px;
	overflow:hidden;
	z-index: 9999;
	opacity: 0.99;
}

#aratologotopcenter p { display: table-cell; vertical-align: top; text-align: center; }


#left {
	height:100%;
	width:50%;
	vertical-align: top;
	float: left;
	display: table;
	z-index: 9999;
	opacity: 0.99;
}

#left p { display: table-cell; vertical-align: middle; text-align: right; padding-right:20px;}

#leftmenu {
	width:51%;
	height:100%;
	float: left;
	text-align: right;
	display: table;
	opacity: 0.99;
	z-index: 9999;

}

#leftmenu p { display: table-cell; vertical-align: middle; text-align: right; 	padding-right:40px;}

#leftmenu p a
{
text-shadow:0 0 5px white;
font-family:Discognate;

font-size:25pt;
line-height: 35pt;
}

#leftmenu p a:hover
{
text-shadow:0 0 10px black;
font-family:Discognate;

font-size:25pt;
line-height: 35pt;
}

#line {
	width:1%;
	height:100%;
	float: left;
	display: table;
	z-index: 9999;
	opacity: 0.99;
}

#line p{ display: table-cell; vertical-align: middle; text-align: center; }

#menu {
	width:48%;
	height:100%;
	float: left;
	display: table;
	opacity: 0.99;
	z-index: 9999;

}

#menu p { display: table-cell; vertical-align: middle; text-align: left; padding-left:40px;}

#menu p a
{
	text-shadow:0 0 5px white;
	font-family:Discognate;

	font-size:25pt;
	line-height: 35pt;
}

#menu p a:hover
{
	text-shadow:0 0 10px black;
	font-family:Discognate;

	font-size:25pt;
	line-height: 35pt;
}

#menuright {
	position:fixed;
	right:0px;
	width:300px;
	top:45%; 
	height:240px; 
	margin-top:-120px;
	font-family:Arial;
	font-size:25pt;
	line-height: 35pt;
	padding-left:35px;
	background: transparent url(../images/menubg.png) repeat top left;
	overflow:hidden;
	z-index: 9999;
	opacity: 0.00;
}

#menuright:hover {
	opacity: 0.99;
}


#menuright a
{
text-shadow:0 0 5px white;
outline:none; text-decoration:none; border: 0;
}

#menuright a:hover
{
text-shadow:0 0 10px white;
outline:none; text-decoration:none; border: 0;
}

#lineright {
	position:fixed;
	right:319px;
	width:2px;
	top:0; 
	height:80%; 
	margin-top:-175px;
	z-index: 9999;
	overflow:hidden;
}

#top {
	position:fixed;
	right:30px;
	width:100%;
	top:15px;
	height:140px; 
	text-align:right;
	z-index: 9999;
	overflow:hidden;
}

#akademiatop {
	position:absolute;
	right:30px;
	width:100%;
	top:15px;
	height:140px; 
	text-align:right;
	z-index: 9999;
	overflow:hidden;
}


#adat {
	margin-top:60px;
	color:black;
	/*padding:10px;
	padding-left:25px;*/
	padding-right:25px;
	z-index: 9999;

	font-size:14pt;
	line-height: 16pt;
	text-align: center;
}

#adat a {
	color:black;
}

#menugomb {
	position:fixed;
	right:5px;
	width:20px;
	top:46%; 
	height:200px; 
	margin-top:-100px;
	text-align:center;
	font-family:Discognate;
	font-size:25pt;
	line-height: 35pt;
	overflow:hidden;
	z-index: 9999;
	opacity: 0.99;
}

#content {
	/*height:300px; */
}

#akademiatext {
	float:right;
	width:740px;
	margin:0 15px 0 0;
	padding:0;
	text-align: justify;
}

#imagesbox {
	float:left;
	margin: 0;
	padding:0;
	text-align: left;
}

#imagesbox img {

		filter: url(../filters.svg#grayscale); /* Firefox */
		filter: gray; /* IE */
		-webkit-filter: grayscale(1); /* Webkit */
       -moz-filter: grayscale(100%);
         -o-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
            filter: grayscale(100%);
			opacity:0.2;
	}

#imagesbox img:hover {
		filter: none;
		-webkit-filter: grayscale(0);
		       -moz-filter: grayscale(0);
         -o-filter: grayscale(0);
        -ms-filter: grayscale(0);
            filter: grayscale(0);
			opacity:1;
	}


/* ----------MENU----------*/
/* Clearfix */
.group:after { visibility: hidden; display: block; content: ""; clear: both; height: 0; }
*:first-child+html .group { zoom: 1; } /* IE7 */
.nav-wrap { 
	margin: 10px; 
	/*background-color:#444444;*/
	height:24px;
	border-bottom:solid 4px  #444;

}

/* Example One */
#example-one { 
	margin: 0; 
	list-style: none; 
	position: relative; 
}
#example-one li { 
	display: inline-block;

}
#example-one a { 
	font-family: Verdana,Arial,Geneva;
	font-size:14pt;
	line-height: 20t;
	color: #444; 
		margin: 0 5px 0 5px;
	text-decoration: none;

	/*text-transform: uppercase;*/
}
#example-one a:hover { 
	color: #22a1a7; 
}
#magic-line { 
	position: absolute;
	bottom: -7px; 
	width: 100px; 
	height: 6px; 
	background: white;
}
.current_page_item a { 
	color: black !important; 
}
.ie6 #example-one li, .ie7 #example-one li { 
	display: inline; 
}
.ie6 #magic-line {
	bottom: -7px;
}