@charset "utf-8";
/* CSS Document */
* {
	margin: 0;
	padding: 0;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	color: #878989;
	font-size: 11px;
	outline: none;
}
ul {
	list-style: none;
}
html {
	background: url(../images/background.jpg) left top no-repeat #000;
}
body {
	margin: 0;
}
#overlay {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: url(../images/background.jpg) left top no-repeat #000;
	z-index: 10000;
}
/*HEADER*/
#header {
	position: relative;
	top: 36px;
	width: 960px;
	height: 133px;
	margin: 0 0 0 0;
	z-index: 10001;
}
#title,
#title span {
	position: absolute;
	width: 364px;
	height: 90px;
}
#title {
	left: 0;
	top: 4px;
	text-indent: 5px;
}
#title span {
	left: 0;
	top: 0;
	background: url(../images/title.jpg);
}
/*MENU*/
#languages {
	width: 132px;
	height: 34px;
	position: absolute;
	left: 359px;
	top: 0px;
	overflow: visible;
}
#contact-info {
	width: 601px;
	height: 34px;
	position: absolute;
	left: 359px;
	top: 25px;
	overflow: visible;
}
#languages li,
#contact-info li {
	position: relative;
	float: left;
	margin: 0 -9px 0 0;
	height: 34px;
	text-align: center;
	line-height: 34px;
}
#menu {
	width: 260px;
	height: 46px;
	position: absolute;
	left: 360px;
	top: 51px;
}
#menu li {
	float: left;
	height: 46px;
	position: relative;
	margin-right: -7px;
}
#header ul a,
#header ul span {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	background-repeat: no-repeat;
	cursor: pointer;
}
#menu a,
#menu span {
	line-height: 46px;
	background-position: 8px 8px;
}
#languages a,
#languages span,
#contact-info a,
#contact-info span{
	line-height: 36px;
	background-position: 9px 9px;
}
#header ul span.highlight {
	background-image: none;
}
#header ul span.highlight span {
	background-position: 0 0;
	position: static;
}
#languages-magyar {
	width: 69px;
}
#languages-magyar span {
	background-image: url(../images/languages/magyar.jpg);
}
#languages-magyar .highlight span {
	background-image: url(../images/languages/magyar.png);
}
#languages-english {
	width: 72px;
}
#languages-english span {
	background-image: url(../images/languages/english.jpg);
}
#languages-english .highlight span {
	background-image: url(../images/languages/english.png);
}
/*THUMBNAILS*/
#thumbnails {
	margin: 57px 0 60px 184px;
	min-width: 728px;
	overflow: auto;
}
#thumbnails li {
	width: 180px;
	height: 135px;
	overflow: hidden;
	margin: 0 2px 2px 0;
	float: left;
	position: relative;
}
#thumbnails li * {
	cursor: pointer;
}
#thumbnails img {
	border: none;
	display: block;
	position: absolute;
	left: 0;
	top: 0;
}

#thumbnails h2 {

	display: block;

	position: absolute;

	left: 0;

	top: -47px;

	z-index: 1;

	width: 180px;

	height: 231px;

}

#thumbnails a {

	display: block;

	height: 100%;

	text-decoration: none;

}

#thumbnails a span {

	width: 160px;

	display: block;

	position: absolute;

	left: 2px;

	bottom: 0px;

	background: url(../images/thumbnails/title.png);

	font-size: 11px;

	font-weight: normal;

	font-style: italic;

	color: #000;

	line-height: 17px;

	padding: 4px 8px 6px 8px;

}

#thumbnails strong {

	display: block;

	font-weight: normal;

	font-size: 13px;

	font-style: normal;

	color: #fff;

	text-transform: uppercase;

	letter-spacing: 2px;

}

#thumbnails .border {

	position: absolute;

	left: 0;

	top: 0;

	width: 180px;

	height: 135px;

	background: url(../images/thumbnails/border.png);

}

#thumbnails .selected,

#thumbnails .selected span {

	width: 180px;

	height: 135px;

	position: absolute;

	display: block;

}

#thumbnails .selected span {

	position: static;

	background: url(../images/thumbnails/selected.png);

}

/*FILTERING*/

form {

	position: absolute;

	top: 25px;

	z-index: 1;

}

fieldset {

	border: none;

}

.newListSelected {

	position: relative;

	width: 180px;

	height: 32px;

	margin: -7px 0 0 0;

	top: 4px;

}

#filter-category-container {

	z-index: 2;

	background: url(../images/thumbnails/filter-categories.jpg) 0 3px no-repeat;

}

#filter-client-container {

	z-index: 1;

	background: url(../images/thumbnails/filter-clients.jpg) 0 3px no-repeat;

}

.ul-container {

	width: 300px;

	height: 300px;

	position: absolute;

}

.newListSelected .highlight {

	display: block;

	position: absolute;

	left: 150px;

	top: 0;

	background: url(../images/thumbnails/select.png);

	width: 33px;

	height: 32px;

	z-index: 1;

}

.selectedTxt {

	position: absolute;

	left: 0;

	top: 3px;

	width: 183px;

	line-height: 26px;

	text-indent: 10px;

	font-size: 10px;

	text-transform: uppercase;

	cursor: pointer;

	overflow: hidden;

	z-index: 2;

}

#filter-category-label {

	height: 25px;

}

#filter-client-label {

	height: 26px;

}

.newList {

	width: 158px;

	line-height: 24px;

	position: absolute;

	z-index: 3;

	text-transform: uppercase;

	border-bottom: 1px solid #1a1a1a;

}

#filter-category-list {

	margin-top: -4px;

	background-image: url(../images/thumbnails/filter-categories-list.jpg);

}

#filter-client-list {

	margin-top: -4px;

	background-image: url(../images/thumbnails/filter-clients-list.jpg);

}

.newList li {

	width: 180px;

	height: 24px;

	padding: 1px 0 0 0;

}

.newList a {

	display: block;

	text-decoration: none;

	font-size: 10px;

	text-indent: 9px;

	height: 24px;

	width: 156px;

	margin: 0px 0 0 1px; 

	background-image: url(../images/thumbnails/filter-highlight.jpg);

	background-position: 0 24px;

	background-repeat: repeat-x;

}

#filter-reset,

#filter-reset span {

	display: block;

	height: 34px;

	line-height: 34px;

	text-align: center;

}

#filter-reset {

	position: relative;

	bottom: 4px;

	margin-top: -1px;

}

#filter-reset span {

	position: absolute;

	left: 0;

	top: 0;

}

#filter-reset .highlight span,

#filter-sort .highlight span {

	position: static;

}

#filter-sort,

#filter-sort span {

	display: block;

	height: 34px;

	line-height: 34px;

	text-align: center;

}

#filter-sort {

	position: relative;

	bottom: 13px;

}

#filter-sort span {

	position: absolute;

	left: 0;

	top: 0;

}



/*GALLERY*/

#gallery {

	position: relative;

	overflow: hidden;

	margin: 57px 0 0 0;

	min-height: 482px;

	min-width: 932px;

	height: 482px;

	width: 100%;

}

#gallery ul {

	position: relative;

	margin: 0 0 0 184px;

}

#gallery li {

	float: left;

	margin: 0 2px 0 0;

	position: relative;

	height: 482px;

}

#gallery-overlay {

	position: absolute;

	top: 190px;

	width: 100%;

	height: 482px;

	overflow: hidden;

}

.mask-left,

.mask-right,

#gallery-center {

	position: absolute;

	display: block;

	background: #000;

	height: 482px;

	top: 0;

}

.mask-left,

.mask-right {

	filter:alpha(opacity=80);

	opacity: 0.8;

	-moz-opacity: 0.8;

}

.mask-left {

	width: 184px;

	left: 0;

}

.mask-right {

	width: 100%;

	left: 0px;

	cursor: pointer;

}

#gallery-center {

	width: 0px;

	height: 482px;

	background: url(empty.gif);

	left: 184px;

	overflow: visible;

}

.mask-center {

	position: absolute;

	display: block;

	height: 480px;

	border: 1px solid #fff;

	filter:alpha(opacity=10);

	opacity: 0.1;

	-moz-opacity: 0.1;

}

#gallery-overlay #gallery-prev,

#gallery-overlay #image-number,

#gallery-overlay #gallery-next {

	position: absolute;

	top: 227px;

	height: 29px;

	overflow: hidden;

	z-index: 2;

	display: block;

}

#gallery-overlay #gallery-prev,

#gallery-overlay #gallery-next {

	width: 50px;

}

#gallery-overlay #gallery-prev {

	left: 0;

}

#gallery-overlay #gallery-next {

	right: 0;

}

#gallery-next span,

#gallery-prev span {

	width: 50px;

	height: 29px;

	position: static;

	display: block;

	cursor: pointer;

}

#gallery-next span {

	background: url(../images/gallery/next.png);

}

#gallery-prev span {

	background: url(../images/gallery/prev.png);

}

#gallery-overlay span.highlight {

	position: absolute;

	left: 0;

	top: 0;

}

#gallery-next span.highlight {

	background: url(../images/gallery/next.jpg);

}

#gallery-prev span.highlight {

	background: url(../images/gallery/prev.jpg);

}

#sidebar {

	position: absolute;

	left: 0;

	top: 190px;

}

#image-number {

	width: 45px;

	left: 50%;

	margin-left: -23px;

}

#image-number span {

	display: block;

	width: 45px;

	height: 29px;

	background: url(../images/gallery/image_number.png);

	position: static;

	line-height: 29px;

	text-align: center;

	color: #d6d0ce;

	letter-spacing: -1px;

}

#project-info,

#filter-works {

	position: absolute;

	width: 180px;

	left: 2px;

	top: 0;

	z-index: 3;

}

#filter-works.active {

	z-index: 10001;

}

#project-info-show,

#project-info-show span {

	position: absolute;

	width: 180px;

	height: 26px;

	top: 0;

	display: block;

	left: 2px;

}

.project-bg {

	background: #1a1a1a;

	position: absolute;

	display: block;

	width: 100%;

	height: 100%;

	left: 0;

	top: 0;

}

#project-info-show {

	position: relative;

	text-indent: 5px;

	line-height: 26px;

	z-index: 1;

	left: 0;

}

#project-info ul {

	position: relative;

	width: 180px;

	margin-top: -1px;

	z-index: 1;

}

#project-info li {

	position: relative;

	line-height: 16px;

	border-top: 1px solid #222322;

	padding: 0px 0;

}

#project-info .label {

	position: relative;

	display: block;

	left: 7px;

	font-size: 9px;

	font-style: italic;

	color: #666;

	line-height: 16px;

	margin: 2px 0 0 0;

}

#project-info .value {

	position: relative;

	display: block;

	margin: -14px 0 0 40px;

	padding: 0 0 4px 0;

	width: 130px;

	text-align: right;

	color: #808080;

	line-height: 16px;

}

#project-info h2,

#filter-works h2 {

	position: relative;

	width: 180px;

	height: 26px;

	line-height: 26px;

	text-indent: 7px;

	text-align: right;

	font-weight: normal;

	text-transform: uppercase;

	z-index: 1;

}

#project-info h2 span,

#filter-works h2 span {

	position: absolute;

	left: 0;

	top: 0;

	width: 180px;

	height: 26px;

	background-position: right top;

	background-repeat: no-repeat;

}

#project-info p {

	position: relative;

	width: 160px;

	padding: 4px 10px 8px;

	color: #808080;

	text-align: right;

	font-size: 10px;

	line-height: 15px;

	z-index: 1;

}

#project-info .categories {

	font-style: italic;

}

#project-info p a {

	display: inline;

	font-size: 10px;

}

#project-info p a:hover {

	color: #f00;

	text-decoration: underline;

}

#h2_project-info span.highlight {

	display: block;

	width: 5px;

	height: 5px;

	background: url(../images/gallery/x_h.jpg);

	position: absolute;

	left: 11px;

	top: 11px;

	z-index: 10;

}

#project-info-show span.highlight {

	display: block;

	width: 5px;

	height: 3px;

	background: url(../images/gallery/v_h.jpg);

	position: absolute;

	left: 13px;

	top: 12px;

	z-index: 10;

}

#open-website {

	display: block;

	position: absolute;

	z-index: 10;

	height: 32px;

	right: -3px;

	text-indent: -1000px;

	overflow: hidden;

	margin-top: -3px;

	cursor: pointer;

}

#open-website span {

	display: block;

	position: absolute;

	height: 32px;

	left: 0;

	top: 0;

}

#open-website .highlight span {

	position: static;

}

#gallery-close,

#gallery-close span {

	position: absolute;

	display: block;

	width: 76px;

	height: 32px;

	left: 0;

	top: 0;

}

#gallery-close {

	top: -3px;

	left: 182px;

	margin-left: 2px;

	line-height: 32px;

	text-align: center;

}

#gallery-close .highlight {

	background: none;

}

/*ABOUT-US*/

#about-us {

	position: absolute;

	left: 184px;

	top: 190px;

	width: 600px;

	border-top: 1px solid #1a1a1a;

	overflow: hidden;

}

#about-gallery {

	position: relative!important;

	height: 416px!important;

}

#about-gallery img {

	border: 1px solid #4d4d4d;

}

#about-us h2,

#news h2,

#contact-us h2 {

	line-height: 20px;

	font-weight: normal;

	font-size: 18px;

	color: #fff;

	background: url(../images/h2.jpg) repeat-x left top #2c3339;

	margin: 10px 0 35px 0;

	padding: 6px 10px 8px;

}

#about-us h3 {

	color: #6aaebf;

	font-weight: normal;

	font-size: 17px;

	line-height: 19px;

	margin: 0 0 3px 0;

}

#about-us p,
#our-services li,
#news p {
	font-size: 13px;
	line-height: 19px;
	margin-bottom: 35px;
	text-align: justify;
	color: #999;
}
#about-us #our-services {
	float: left;
	width: 600px;
	margin: 35px 0;
}
#about-us #our-services li {
	width: 300px;
	margin: 0;
}
#about-us p a,
#news p a {
	color: #f00;
	font-style: italic;
	font-size: 13px;
}
#about-us ul {
	position: relative;
	width: 1220px;
}
#about-us li {
	width: 600px;
	position: relative;
	float: left;
	margin-right: 10px;
}
#button-team {
	position: absolute;
	overflow: hidden;
	display: block;
	right: -3px;
	top: 7px;
	height: 40px;
	text-indent: -1000px;
	cursor: pointer;
}
#button-team span {
	display: block;
	height: 40px;
}
#team-close {
	position: absolute;
	overflow: hidden;
	display: block;
	right: -3px;
	top: 7px;
	width: 40px;
	height: 40px;
	background: url(../images/about-us/team-close.jpg) 3px 3px no-repeat;
	text-indent: -1000px;
	cursor: pointer;
}
#team-close span {
	display: block;
	width: 40px;
	height: 40px;
}
#team-close .highlight span {
	background: url(../images/about-us/team-close.png) center no-repeat;
}
#team {
	margin-bottom: 50px;
}
#team ul {
	width: 600px;
}
#team li {
	float: none;
	height: 128px;
	position: relative;
	background: url(../images/about-us/member-bg.jpg);
	margin: 0 0 15px 0;
}
#team li.art-director {
	background: url(../images/about-us/art-director-bg.jpg);
}
.member-picture {
	width: 226px;
	height: 126px;
	border: 1px solid #1a1a1a;
	position: absolute;
	left: 0;
	top: 0;
	background: #010101;
}
.member-picture span {
	width: 220px;
	height: 120px;
	position: absolute;
	left: 3px;
	top: 3px;
}
#szoke-peter .member-picture span {
	background-image: url(../content/members/szoke-peter.jpg);
}
#ordogh-laszlo .member-picture span {
	background-image: url(../content/members/ordogh-laszlo.jpg);
}
#drozsnyik-david .member-picture span {
	background-image: url(../content/members/drozsnyik-david.jpg);
}
#vagfalvi-dori .member-picture span {
	background-image: url(../content/members/vagfalvi-dora.jpg);
}
#nonn-zsuzsi .member-picture span {
	background-image: url(../content/members/nonn-zsuzsi.jpg);
}
#bolgar-attila .member-picture span {
	background-image: url(../content/members/bolgar-attila.jpg);
}
#polyak-sandor .member-picture span {
	background-image: url(../content/members/polyak-sandor.jpg);
}
#team li h3 {
	border: 1px solid #1a1a1a;
	position: absolute;
	left: 227px;
	top: 0;
	height: 38px;
	padding: 0 10px;
	line-height: 36px;
}
#team li.art-director h3 {
	background: url(../images/about-us/art-director-label-bg.jpg) -4px -1px;
}
#team .position {
	position: absolute;
	left: 227px;
	top: 39px;
	border: 1px solid #1a1a1a;
	text-transform: uppercase;
	height: 24px;
	line-height: 22px;
	font-size: 9px;
	padding: 0 10px;
}
#team li.art-director .position {
	background: url(../images/about-us/art-director-label-bg.jpg) -4px -8px;
}
/*NEWS*/
#news {
	margin: 57px 0 0 0;
}
#news li {
	position: relative;
}
.article {
	border-top: 1px solid #1a1a1a;
	width: 600px;
	margin: 0 0 0 184px;
}
#news span {
	display: block;
	position: absolute;
	width: 170px;
	text-align: right;
}
.article-number {
	color: #1f1f1f;
	font-size: 50px;
	letter-spacing: -4px;
	line-height: 50px;
	margin-top: -9px;
}
.article-date {
	top: 25px;
	font-size: 11px;
	color: #666;
}
.article-author {
	top: 38px;
	color: #6aaebf;
	font-style: italic;
}
/*CONTACT-US*/
#contact-us {
	border-top: 1px solid #1a1a1a;
	width: 600px;
	position: absolute;
	left: 184px;
	top: 190px;
}
#contact-us form {
	position: relative;
	width: 450px;
	height: 225px;
	float: left;
	margin: -20px 0 0 0;
}
#contact-us li {
	position: relative;
	border: 1px solid #1a1a1a;
	height: 24px;
	margin: 0 -1px -1px 0;
	float: left;
	z-index: 1;
}
#contact-name {
	width: 224px;
}
#contact-name input,
#contact-name label {
	width: 214px;
}
#contact-email {
	width: 223px;
}
#contact-email input,
#contact-email label {
	width: 213px;
}
#contact-subject {
	width: 448px;
}
#contact-subject input,
#contact-subject label {
	width: 438px;
}
#contact-message {
	width: 448px;
	height: 148px!important;
}
#contact-message textarea,
#contact-message label {
	width: 438px;
	height: 138px!important;
}
#contact-send {
	width: 120px;
}
#contact-us label,
#contact-us input,
#contact-us textarea {
	position: absolute;
	left: 0;
	top: 0;
	height: 14px;
	border: none;
	line-height: 14px;
	color: #4d4d4d;
	background: #000;
	padding: 5px 5px;
	cursor: text;
}
#contact-us textarea {
	overflow: auto;
}
#contact-us label {
	z-index: 2;
}
#contact-send {
	border: none!important;
	height: 34px!important;
	position: relative;
	right: 4px;
	bottom: 4px;
}
#contact-send span {
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	cursor: pointer;
}
#contact-send label,
#contact-send input {
	background: none;
}
#contact-send .highlight span {
	position: static;
}
#contact-send label,
#contact-send span {
	height: 34px;
	padding: 0;
	line-height: 34px;
	text-align: center;
}
#contact-us .note {
	position: absolute;
	right: 2px;
	bottom: 0;
	color: #6aaebf;
	font-style: italic;
	text-align: right;
	line-height: 24px;
	font-size: 10px!important;
}
#contact-address {
	float: left;
	width: 150px;
	position: relative;
	left: 16px;
	bottom: 4px;
}
#contact-address h3 {
	font-weight: normal;
	color: #6aaebf;
	line-height: 14px!important;
	font-size: 10px;
	margin: 15px 0 0 0;
	font-style: italic;
}
#contact-address p {
	font-size: 10px;
	font-style: normal;
	line-height: 14px!important;
}
.filter {
	margin-top: -1px;
}
.filter ul {
	height: 249px;
}
.filter dt {
	width: 180px;
	height: 26px;
	background: url(../images/thumbnails/filter-clients.jpg);
	font-size: 9px;
	text-transform: uppercase;
	line-height: 26px;
	text-indent: 10px;
	cursor: pointer;
	position: relative;
	z-index: 10;
}
.filter dt span {
	position: absolute;
	display: block;
	right: -3px;
	top: -3px;
	width: 33px;
	height: 32px;
}
.filter dt .highlight span {
	position: static;
	right: 0;
	top: 0;
	background: url(../images/thumbnails/select.png);
}
.filter dd {
	width: 180px!important;
	height: 250px;
	font-size: 9px;
	text-transform: uppercase;
	line-height: 24px;
	text-indent: 7px;
	background: url(../images/thumbnails/filter-clients-list.jpg);
	position: absolute;
	z-index: 20;
}
.filter dd a {
	font-size: 9px;
	text-decoration: none;
	display: block;
	height: 24px;
}
.filter dd li {
	margin-left: 3px;
	text-indent: none;
	border-bottom: 1px solid #333;
	position: relative;
	top: 1px;
}
.jScrollPaneContainer {
	position: relative;
	overflow: hidden;
	z-index: 1;
}

.jScrollPaneTrack {
	position: absolute;
	cursor: pointer;
	right: 0;
	top: 0;
	height: 100%;
}
.jScrollPaneDrag {
	position: absolute;
	background: url(../images/thumbnails/filter-scrollbar.jpg) no-repeat center;
	cursor: pointer;
	overflow: hidden;
}
.jScrollPaneTrack span {
	position: absolute;
	left: 0;

	top: 0;

	width: 100%;

	height: 100%;

	background: url(../images/thumbnails/filter-scrollbar_h.jpg) no-repeat center;

}

.jScrollPaneDragTop {

	position: absolute;

	top: 0;

	left: 0;

	overflow: hidden;

}

.jScrollPaneDragBottom {

	position: absolute;

	bottom: 0;

	left: 0;

	overflow: hidden;

}

a.jScrollArrowUp {

	display: block;

	position: absolute;

	z-index: 1;

	top: 0;

	right: 0;

	text-indent: -2000px;

	overflow: hidden;

	/*background-color: #666;*/

	height: 9px;

}

a.jScrollArrowUp:hover {

	/*background-color: #f60;*/

}



a.jScrollArrowDown {

	display: block;

	position: absolute;

	z-index: 1;

	bottom: 0;

	right: 0;

	text-indent: -2000px;

	overflow: hidden;

	/*background-color: #666;*/

	height: 9px;

}

a.jScrollArrowDown:hover {

	/*background-color: #f60;*/

}

a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {

	/*background-color: #f00;*/

}



ul.filter-select{position:relative;border:1px solid #999}

ul.filter-select:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}

ul.filter-select li{padding:5px 5px 5px 15px;color:#333}

ul.filter-select li.filter-select-open{position:absolute;top:0;right:0;padding:0;cursor:pointer;border-left:1px solid #999;background:#ccc}

ul.filter-select li.filter-select-open span{display:block;border-left:1px solid #ddd;}

ul.filter-select ul.filter-select-drop{display:none;position:absolute;left:-1px;border:1px solid #999;background:#fff;z-index:800}

ul.filter-select ul.filter-select-drop li{cursor:pointer;background:none}

ul.filter-select ul.filter-select-drop li:hover{color:#fff;background:#0000ff}