/*
   CSS for theviennaproject.com

   Design by Walter Krivanek, VividVisions
   www.vividvisions.com
   
   (c) Copyright 2008 by Roman Mittermayr
   www.theviennaproject.com
   
   Photo credits:
   Folder: http://www.sxc.hu/photo/799457
   Paper: http://www.sxc.hu/photo/463417
   Ruled paper: http://www.sxc.hu/photo/1191859
   Polaroid: http://www.sxc.hu/photo/854924
   Light effect: http://www.sxc.hu/photo/256909
   Wood pattern: http://textures.z7server.com/nTextures.php?id=16
*/

/********************************
   Reset & core
 ********************************/

* {
   margin: 0;
   padding: 0;
   border: 0 none;
}

body {
   background: #000000;
   font: normal normal normal 13px/17px "Trebuchet MS", Helvetica, Arial, sans-serif;
   color: #444444;
}

a {
   color: #d60000;
}

#wrap {
   min-width: 960px;
}

/********************************
   Header
 ********************************/

#header {
   background: #000000;
}

#header div {
   position: relative;
   width: 960px;
   height: 75px;
   margin: 0 auto;
   z-index: 3;
}

#header h1 a {
   display: block;
   position: relative;
   top: 10px;
   width: 363px;
   height: 59px;
   background: url(../images/logo.png) 0 0 no-repeat;
   overflow: hidden;
   white-space: nowrap;
   text-indent: 500px;
}

#header ul {
   position: absolute;
   right: 0;
   bottom: 10px;
   list-style: none;
   overflow: hidden;
   z-index: 4;
}

#header ul li {
   display: block;
   margin-left: 15px;
   float: left;
   overflow: hidden;
   white-space: nowrap;
   text-indent: -999px;
   height: 30px;
}

#header ul li a {
   display: block;
   height: 30px;
}

.sp-tmobile a {
   width: 115px;
   background: url(../images/sponsor_tmobile.png) 0 0 no-repeat;
}

.sp-herold a {
   width: 155px;
   background: url(../images/sponsor_herold.png) 0 0 no-repeat;
}

.sp-studivz a {
   width: 100px;
   background: url(../images/sponsor_studivz.png) 0 0 no-repeat;
}

/********************************
   Flashlight effect
 ********************************/

#flashlight {
   position: fixed;
   left: 0;
   top: 0;
   width: 100%;
   height: 765px;
   z-index: 2;
   background: #000000 url(../images/flashlight_4.png) 50% 50% no-repeat;
   display: none;
}

/********************************
   Content
 ********************************/

body.closed #wrap {
   background: #000000;
}

#main {
   position: relative;
   display: block;
   width: 960px;
   height: 690px;
   margin: 0 auto;
}

body.closed #main {
   background: url(../images/file_closed.jpg) 92px -75px no-repeat;
}

body.open #main {
   background: url(../images/open.jpg) 92px -75px no-repeat;
}

.content {
   position: relative;
   top: 100px;
   margin: 0 290px 0 300px;
}

.content p,
.content h1,
.content h2,
.content h3,
.content table,
.content ul,
.content ol,
.content pre,
.content blockquote,
.content object {
   margin-bottom: 10px;
}

.content h2 {
   font-weight: bold;
   font-size: 16px;
}

.content h3 {
   font-weight: bold;
   font-size: 14px;
}

.content ul {
   margin-left: 15px;
}

.content ol {
   margin-left: 22px;
}

img.border {
   padding: 5px;
   background: #ffffff;
   border: 1px solid #cccccc;
}

/********************************
   Menu
 ********************************/

.menu {
   display: block;
   position: absolute;
   left: 277px;
   top: 18px;
   width: 414px;
   height: 72px;
   list-style: none;
   overflow: hidden;
   padding-left: 11px;
   z-index: 4;
   background-color: transparent;
   background-position:  0 0 ;
   background-repeat: no-repeat;
   z-index: 3;
}

.menu li {
   display: block;
   float: left;
}

.menu a {
   position: relative;
   display: block;
   width: 66px;
   height: 72px;
   background-position: 0 bottom;
   background-repeat: no-repeat;
   overflow: hidden;
   text-indent: 999px;
   cursor: pointer;
   z-index: 3;
}

body.open .menu {
   background-image: url(../images/menu.jpg);
}

.menu.idea {
   background-position: 0 -72px !important;
}

.menu.story {
   background-position: 0 -144px !important;
}

.menu.trailer {
   background-position: 0 -216px !important;
}

.menu.social {
   background-position: 0 -288px !important;
}

.menu.press {
   background-position: 0 -360px !important;
}

.menu.agency {
   background-position: 0 -432px !important;
}

/********************************
   Footer
 ********************************/

#footer {
   padding: 10px 0;
   background: #000000;
   color: #ffffff;
   font-size: 11px;
   line-height: 13px;
   z-index: 3;
}

#footer div {
   width: 960px;
   margin: 0 auto;
   position: relative;
}

#footer ul {
   position: absolute;
   right: 0;
   top: 0;
   list-style: none;
   overflow: hidden;
}

#footer ul li {
   display: block;
   margin-left: 15px;
   float: left;
   overflow: hidden;
   white-space: nowrap;
   text-indent: -999px;
   height: 30px;
}

#footer ul li a {
   display: block;
   height: 30px;
}

.sp-accor a {
   width: 170px;
   background: url(../images/sponsor_accor.png) 0 0 no-repeat;
}

.sp-gap a {
   width: 70px;
   margin-top:6px;
   background: url(../images/sponsor_thegap.png) 0 0 no-repeat;
}

.sp-886 a {
   width: 55px;
   margin-top:0px;
   background: url(../images/sponsor_886.png) 0 0 no-repeat;
}



.sp-vv a {
   width: 124px;
   background: url(../images/sponsor_vividvisions.png) 0 0 no-repeat;
}

.sp-atv a {
   width: 65px;
   margin-top:2px;
   background: url(../images/sponsor_atv.png) 0 0 no-repeat;
}

.sp-am a {
   width: 119px;
   margin-top:2px;
   background: url(../images/sponsor_ambuzzador.png) 0 0 no-repeat;
}

.gap {
   line-height: 20px;
}