html, body { margin: 0; padding: 0; background: #000; color: #888 }
img { border: 0 }
sup { color: #F00; vertical-align: top; position: relative; top: -4px }
a { color: #F00; text-decoration: none }
a:hover { color: maroon }

div#wrapper { margin: 8px auto; width: 780px }

.index { font: 11px Georgia, sans-serif }
.index a { display: block; width: 780px; height: 480px; background: url(splash.jpg) }
.index div div { float: left; width: 50%; margin-top: 20px }
.index div div+div { text-align: right }

.main { font: 14px Verdana, sans-serif; color: #D87 }

div#top-strip { background: #543 url(strip.jpg); text-align: right; padding: 10px }
div#navigation { float: left; width: 245px; height: 260px; margin: 8px 0; padding: 220px 0 0 0;
                 background: url(navigation.jpg) }
div#navigation a { display: block; padding-top: 10px; text-align: center; font: 16px "Trebuchet MS", sans-serif }

div#content { float: left; margin: 8px 0; width: 535px; height: 480px }
div#content iframe { display: block; width: 535px; height: 480px; border: 0 none }

div#bottom-strip { clear: both }
div#bottom-strip div { background: #543 url(striprev.jpg) bottom left; text-align: right; padding: 10px }
div#bottom-strip div:first-child {  float: right; margin-left: 10px; border-left: solid 8px #000 }
div#bottom-strip a { color: #D64 }

.content { min-height: 440px; padding: 40px 0 0 0; font: 13px Georgia, serif; color: #000;
           background: #000 url(back_content.jpg) top left no-repeat fixed }
.content h1 { margin: 0; padding: 0; text-align: center; letter-spacing: 2px; color: #444; font-size: 26px }
.content p { margin: 15px 10px 0 }
.content p:first-child { margin-top: 0 }

.intro p { text-align: center }
#cv-links { width: 100%; height: 134px; list-style: none; margin: 35px 0 0 0; padding: 7px 0 0; background: #000 }
#cv-links li { width: 25%; margin: 0; padding: 0; float: left; text-align: center }
#cv-links img { vertical-align: text-bottom }
#cv-links img:hover { opacity: 0.6 }

.attila { background-image: url(back_attila.jpg) }
.ernest { background-image: url(back_ernest.jpg) }
.kalman { background-image: url(back_kalman.jpg) }
.oszkar { background-image: url(back_oszkar.jpg) }
.attila h2, .ernest h2, .kalman h2, .oszkar h2 { margin: 0; padding: 80px 0 0 15px; font-weight: normal;
                                                 font: normal 22px "Trebuchet MS", sans-serif; color: #333 }
.attila div, .ernest div, .kalman div, .oszkar div { position: absolute; left: 20px; right: 20px; bottom: 10px;
                                                     text-align: justify; font-size: 12px }

.invite { background-image: url(back_invite.jpg) }
.invite div a { position: absolute; left: 0; bottom: 0; width: 100%; height: 250px }

.media { min-height: 300px; padding: 180px 0 0 0; text-align: center }
.media p { margin-top: 65px }
.media .mediacontainer { clear: both; margin: 0 auto; padding: 25px 0 0 0; width: 374px; text-align: right }
.media .mediacontainer .medialink { float: right; margin-left: 20px; height: 15px; width: 120px }
.media .mediacontainer .medialink img { float: left; border: 0; margin: 1px 0 0 0; cursor: pointer; opacity: .50 }
.media .mediacontainer .medialink #mediafile1,
.media .mediacontainer .medialink #mediafile2,
.media .mediacontainer .medialink #mediafile3,
.media .mediacontainer .medialink #mediafile4 { visibility: hidden; height: 15px; width: 100px }
.qtmedia object, .qtmedia embed { height: 15px; width: 100px }

.contact { background-image: url(back_contact.jpg) }
.contact h1 { padding: 200px 0 0 25px; letter-spacing: 0; font-weight: normal; text-align: left }
.contact h1 sup, .contact a { color: maroon }
.contact h1 span { font-size: 13px }
.contact p { margin-left: 25px; text-align: left }
.contact #l2a-logo { position: fixed; bottom: 10px; left: 320px; opacity: .20 }