/*------------------------------------------ ---------------- Reseting ------------------ ----------------------------------------- */ html, body, div, span, object, h1, h2, h3, h4, h5, h6, p, a, abbr, acronym, img, s, small, strike, sup, sub, dl, dt, dd, ol, ul, li, form, fieldset, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; background: transparent } :focus, :active { outline: 0 } html { font-size: 100.01%; height: 100% } body { font-size: 62.5%; color: #fff; height: 100%; background: #0a0200 } h1, h2, h3, h4, h5, h6 { font-weight: bold; color: #fff } h1 { font-size: 2.4em; line-height: 0.85em; margin-bottom: 0.7em; text-transform:uppercase; } h2 { font-size: 1.8em; line-height: 1em; margin-bottom: .95em } h3 { font-size: 1.4em; line-height: 1.285714em; margin-bottom: 0.65em } h4 { font-size: 1.4em; line-height: 1.3846em; margin-bottom: 1.3846em } p, pre, code, label, th, td, dd, dt, select { font-size: 1.3em; line-height: 1.3846em; margin-bottom: 2.0769em } ul, ol { margin-bottom: 1.8em } ul { list-style: square } ol { list-style: decimal } li { margin-left: 3.6em; color: #999; } li p { color: #000 } /*------------------------------------------ ------------------ Fonts ------------------- ----------------------------------------- */ h1, h2, h3, h4, h5, h6 { font-family: sans-serif } p, pre, label, th, td { font-family: sans-serif } pre { font-family: Corbel, Verdana, "Bitstream Vera Sans", sans-serif; font-style: italic } code { font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Monaco, Courier, monospace } dd, dt { font-family: "Trebuchet MS", sans-serif } /*------------------------------------------ ------------------ Links ------------------- ----------------------------------------- */ a:link, a:visited, a:hover, a:active { text-decoration: none; color: #999; border-bottom: #333 1px solid } a:hover { text-decoration: none; color: #ccc; border-bottom: #666 1px solid } a img { border: none } .watch:link, .watch:visited, .watch:hover, .watch:active { border-bottom: none } /*------------------------------------------ ------------- Global Classes --------------- ----------------------------------------- */ .clear { clear: both } .floatLeft { float: left !important } .floatRight { float: right !important } .textLeft { text-align: left } .textRight { text-align: right } .textCenter { text-align: center } .textJustify { text-align: justify } .bold { font-weight: bold !important } .italic { font-style: italic } .underline { border-bottom: 1px solid } .highlight { background: #ffc } .noPadding { padding: 0 !important } .noMargin { margin: 0 !important } .noIndent { margin-left: 0; padding-left: 0 } .noBullet { list-style: none; list-style-image: none } .imgLeft { float: left; margin: 0 18px 18px 0 } .cf:after { content: "."; display: block; height: 0; clear: both; visibility: hidden } .cf { display: inline-block } /* Hides from IE-mac \*/ * html .cf { height: 1% } .clearfix { display: block } /* End hide from IE-mac */ /*------------------------------------------ ---------------- Wrapper ------------------- ----------------------------------------- */ #wrap { width: 800px; margin: 0 auto; position: relative } .extra { width: 100%; height: 100%; /* background: url(http://finitefilmslondon.com/img/body.jpg) no-repeat; */ } /* */ .extra2 { min-height: 100%; /* background: url(http://finitefilmslondon.com/img/body2.jpg) bottom right no-repeat; */ } /**/ /*------------------------------------------ ---------------- Layout -------------------- ----------------------------------------- */ #header { height: 120px; margin-bottom: 18px; border-bottom: #979ea4 1px dotted } #header a { border: none } .logo { margin: 52px 0 0 10px } #topMenu { float: right; margin: 75px 0 0 0 } #topMenu li { float: left; margin-left: 0; list-style: none; position: relative; z-index: 100; padding-bottom: 10px } #topMenu li a { text-decoration: none; text-transform: uppercase; display: block; margin: 5px 4px 5px 4px; border: none; font: bold 1.3em/1.3em Arial, sans-serif; color: #fff } #topMenu li a:hover { border-bottom: #666 1px solid } #topMenu .popup { position: absolute; left: -15px; top: 27px; display: none } #topMenu li:hover .popup { display: block } #topMenu .popup .top { height: 10px; width: 190px; background: url(../img/popup_top.png) no-repeat } #topMenu .popup .bottom { height: 10px; width: 190px; background: url(../img/popup_bottom.png) no-repeat } #topMenu ul { background: #1a1a1a; margin: 0; font-size: .8461em; width: 150px; padding: 4px 20px } #topMenu ul li { float: none; padding-bottom: 0 } #topMenu ul a:link, #topMenu ul a:visited { display: inline; color: #808080; line-height: 1.8181em; margin: 0; text-transform: uppercase; border: none } #topMenu ul .active a:link, #topMenu ul .active a:visited, #topMenu ul a:hover, #topMenu ul active { color: #fff } #content { padding-bottom: 18px } .halfWidth { width: 50%; float: left } .inner { padding: 12px 18px 18px 18px; overflow: hidden } .inner2 { padding: 0 18px; clear: both } .filmStrip { height: 120px; clear: left; text-align: center; margin-bottom: 18px; padding-top: 0px; } .filmStrip img { margin: 0 15px } .arrow { margin: 0 0 38px 0 !important } .filmStrip p { float: right; margin-top: 27px; font: normal 1.2em/1.5em "Myriad Pro", "Lucida Grande", Tahoma, Arial, sans-serif; letter-spacing: 1px; font-variant: small-caps } .heading { border-bottom: #434445 1px dotted; padding: 0 0 4px 10px; margin: 0 0 0 8px; clear: left } .headingNoBorder { padding: 0 0 4px 10px; margin: 0 0 0 8px; clear: left } .notice { color: #999; font: normal 0.4em "Myriad Pro", "Lucida Grande", Tahoma, Arial, sans-serif; letter-spacing: 1px } .nav a { font-size: 1.8em; line-height: 0.85em; margin-bottom: 0.7em; letter-spacing: -1px } #footer { border-top: #979ea4 1px dotted; clear: both } #footer p { font: normal 1em/1.8em "Myriad Pro", "Lucida Grande", Tahoma, Arial, sans-serif; letter-spacing: 1px; padding: 10px 0 } .book { padding: 2px; border: #666 1px solid } .reviews p { margin: 0 0 0 36px } .reviews h2 { font-size: 2.4em; padding-bottom: 10px } .other_text p { padding: 5px 18px 5px 18px } .watch img { padding-top: 7px } .player { width: 60%; float: left; text-align: center } .film_details { width: 40%; float: left } #video_player { width:400px; height:326px; border: #666 1px solid; padding: 3px; } .half { float: left; padding: 18px 18px 45px; width: 364px } .half img { display: block } /*----------------------------------------*/ .intro { width: 750px; height: 550px; position: absolute; top: 45%; left: 50%; margin: -275px 0 0 -375px } /*----------------------------------------*/ .reviews { float: left; margin-bottom: 18px; background: url(/feature/img/reviewsBlock.gif) repeat-y } .reviewsExtra { background: url(/feature/img/reviewsBlock2.gif) bottom left no-repeat } .reviewsExtra2 { width: 800px; background: url(/feature/img/reviewsBlock3.gif) no-repeat; padding-top: 18px; overflow: hidden } .reviewHeading { padding: 0 0 4px 0; margin: 0 18px; clear: left } .reviewSundayTimes { margin: 0 0 22px; padding-top: 12px } .reviewLiterallyReview { margin: 0 0 14px } .reviewGuardian { margin: 40px 0 16px } .reviewSundayTelegraph { margin: 41px 0 18px } .half .quotes { float: left; position: relative; top: -10px; left: 5px } #festivals { text-align:center; margin-top: 20px;margin-left: 50px; } #festivals a { border: none; display: block; float: left; width: 130px; height: 95px; font: bold 1.1em/1.8em "Myriad Pro", "Lucida Grande", Tahoma, Arial, sans-serif; } #festivals a.text_only {padding-top: 20px} #festivals img { border: none } /*----------------------------------------*/ .movies { width: 800px !important; height: 295px; overflow: hidden } .moviesList { width: 818px; list-style-type: none; margin: 0; font-size: 1em } .moviesList li { float: left; width: 218px; height: 263px; overflow: hidden; margin: 0 18px 18px 0; padding: 14px 18px 18px; background: #1a1a1a; position: relative } .hr ul { padding-bottom: 18px !important } .hr li { margin-bottom: 0 } .moviesList h3 { padding: 1px 0 16px; margin-bottom: 18px; text-transform: uppercase; background: url(../img/dots.gif) left bottom repeat-x; font: bold 1.7em/1em Calibri, Arial, Helvetica, sans-serif } .moviesList h3 a:link, .moviesList h3 a:visited { color: #fff } .moviesList a:link, .moviesList a:visited { border: none } .moviesList img { display: block; width: 208px; height: 139px; margin-bottom: 12px; padding: 5px; background: #fff } .moviesList p { margin-bottom: 23px; color: #fff; min-height: 54px; _height: 54px; font: 1.2em/1.3846em Calibri, Arial, Helvetica, sans-serif; text-transform:uppercase; } .moviesList p strong { color:#666666; display:block; float:left; font-weight:bold; letter-spacing:1px; padding-right:2px; text-align:right; text-transform:uppercase; width:76px; } .moviesList .details:link, .moviesList .details:visited { display: block; height: 36px; color: #fff; border: none; margin: 0 auto; text-align: center; font: 2em/1.8em Calibri, Arial, Helvetica, sans-serif; background: #333 url(../img/details.gif) no-repeat } .moviesList .details:link span, .moviesList .details:visited span { display: block; cursor: pointer; padding: 0 28px; background: url(../img/details.gif) right -36px no-repeat } .moviesList .details:hover, .moviesList .details:active { color: #333; background: #fff url(../img/details.gif) 0 -72px no-repeat } .moviesList .details:hover span, .moviesList .details:active span { background-position: right -108px } .moviesList .details { display: none !important } .mouse_over { cursor: pointer } .c { position: absolute; font-size: 0; display: block; width: 10px; height: 10px; background: url(../img/corners.gif) no-repeat } .tl { left: 0; top: 0; background-position: 0 0 } .tr { right: 0; top: 0; background-position: -10px 0 } .br { right: 0; bottom: 0; background-position: -10px -10px } .bl { left: 0; bottom: 0; background-position: 0 -10px } .holder { position: relative } .prev { position: absolute; left: -60px; top: -295px; display: block; height: 295px; width: 60px; cursor: pointer; background: url(../img/arrows.gif) 6px center no-repeat } .next { position: absolute; right: -60px; top: -295px; display: block; height: 295px; width: 60px; cursor: pointer; background: url(../img/arrows.gif) -40px center no-repeat } .prev:hover, .prev:active { background-position: -101px center } .next:hover, .next:active { background-position: -146px center } .externalControl { list-style-type: none; margin: 0; text-align: center; font: 2em/1.3846em Calibri, Arial, Helvetica, sans-serif } .externalControl li { margin: 0; padding: 0 14px 0 10px; display: inline; cursor: pointer; background: url(../img/bull.gif) right 11px no-repeat } .externalControl li.first { padding-left: 0 } .externalControl li.last { padding-right: 0; background: none } .externalControl li:hover, .externalControl li:active { color: #fff } .vertical { width: 218px; margin: 0 auto; position: relative; padding: 43px 0 } .slider-1 { list-style-type: none; margin: 0 } .slider-1 li { margin: 0 0 18px; height: 149px !important } .slider-1 a:link, .slider-1 a:visited { display: block; width: 208px; border: none } .slider-1 img { display: block; padding: 5px; width: 208px; height: 139px; background: #fff } .slider-2 li { width: 218px !important; margin: 0 20px 0 0 } .control { display: block; position: absolute; cursor: pointer; height: 60px; width: 218px; text-indent: -9999px; background: url(../img/v_arrows.gif) center 6px no-repeat } .vNext { background-position: center 11px; top: -22px } .vPrev { background-position: center -42px; bottom: -21px } .vNext:hover, .vNext:active { background-position: center -95px } .vPrev:hover, .vPrev:active { background-position: center -148px } .slider-1-wrap { height: 483px !important; overflow: hidden } .slider-2-wrap { width: 694px !important; height: 149px !important; margin: 0 53px; padding: 20px 0 } .horizontal { position: relative } .horizontal .prev { width: 53px; height: 149px; left: 0; top: 20px; background: url(../img/arrows.gif) 6px center no-repeat } .horizontal .next { width: 53px; height: 149px; right: 0; top: 20px; background: url(../img/arrows.gif) -40px center no-repeat } .horizontal .prev:hover, .horizontal .prev:active { background-position: -101px center } .horizontal .next:hover, .horizontal .next:active { background-position: -146px center } .moviesMenu { width: 289px; background: #1a1a1a url(../img/movies_menu_top.gif) no-repeat; margin: 40px auto } .moviesMenu ul { padding: 29px 36px 28px; list-style-type: none; margin: 0; background: url(../img/movies_menu_bottom.gif) left bottom no-repeat; font: bold 1.6em/1.6875em sans-serif } .moviesMenu li { margin: 0 } .moviesMenu a:link, .moviesMenu a:visited { color: #808080; border: none; text-transform:uppercase; } .moviesMenu a:hover, .moviesMenu a:active, .moviesMenu .active a:link, .moviesMenu .active a:visited { color: #fff } .movieTitle { padding: 1px 0 13px; margin-bottom: 31px; text-transform: uppercase; background: url(../img/dots.gif) left bottom repeat-x; font: bold 2.4em/1.125em sans-serif } .movieInfo { color: #999; font-size: 1.2em; line-height: 1.5em } .movieInfo strong { color: #fff }