/*
The Melbourne Cinémathèque

Design & Coding by Alifeleti Brown 2010
*/

 body {
        margin:0px auto;
        padding:0;
        border:0;			
        width: 100%;
        height:100%;
        max-width: 1200px;
        min-width: 800px;
        background-image: url('images/hole.jpg');
        background-repeat: repeat;  
        font-size: 90%;
        font-family: Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif, "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", ;
    }

h1{
margin-top: 0px;
margin-bottom: 0px;
}

h2{
margin-top: 5px;
margin-bottom: 5px;
}

h3{
margin-top: 5px;
margin-bottom: 5px;
}

a:link {color:#99ccff; text-decoration:none; }      /* unvisited link */
a:visited {color:#99ccff; text-decoration:none; }  /* visited link */
a:hover {color:#fff; text-decoration:none; background-color:#000;}  /* mouse over link */
a:active {color:#ff0000; text-decoration:none; background-color:#000;}  /* selected link */


/*
The following code relates to the HEADER
*/

#top_banner {
   float:left;
   width:100%;
   padding-bottom: 10px;
   padding-top: 5px;
   color: #fff;
   text-align: left;
   background-color: #000;
   font-size: 90%;
}

#header {
        clear:both;
        position: relative;
        float:left;
        width:100%;
        background-color: #000;
        height: 130px;
        z-index: 9997;
    }
    
/*
The following code relates to the MAIN CONTENT 
*/

#content_frame {
        position: relative;
        float:left;
        width:100%;
        background: transparent;
        height: 100%;
        margin-bottom: 5px;
}

#content_entry_header {
        position: relative;
        top: 10px;
        left: 20px;
        width:40%;
        min-width: 400px;
        height: 100%;
        background: #000;
        padding-top: 10px;
        padding-bottom: 1px;
        padding-left: 20px;
        padding-right: 10px;
        margin-bottom: 5px;
        color: #fff;
}

#content_entry_header3 {
        position: relative;
        top: 10px;
        left: 20px;
        width:40%;
        min-width: 400px;
        height: 100%;
        background: #000;
        padding-top: 2px;
        padding-bottom: 2px;
        padding-left: 20px;
        padding-right: 10px;
        margin-bottom: 5px;
        color: #fff;
}

#content_entry {
        position: relative;
        left: 20px;
        width:40%;
        min-width: 400px;
        height: 100%;
        background-image: url('images/black_transparency2.png');
        background-repeat: repeat;
        padding-bottom: 10px;
        padding-top: 10px;
        padding-left: 20px;
        padding-right: 10px;
        margin-bottom: 5px;
        color: #fff;
}

/*
The following code relates to the SCREENINGS CONTENT
*/

#content_entry_screenings_header {
        position: relative;
        top: 10px;
        left: 20px;
        width:40%;
        min-width: 580px;
        background: #000;
        padding-top: 10px;
        padding-bottom: 1px;
        padding-left: 20px;
        padding-right: 10px;
        margin-bottom: 5px;
        color: #fff;
}

#content_entry_screenings_header3 {
        position: relative;
        left: 20px;
        width:40%;
        min-width: 580px;
        background: #000;
        padding-left: 20px;
        padding-right: 10px;
        padding-top: 5px;
        padding-bottom: 5px;
        color: #fff;
}

#content_screenings_entry {
        position: relative;
        left: 20px;
        width:40%;
        min-width: 580px;
        height: 100%;
        background-image: url('images/black_transparency.png');
        background-repeat: repeat;
        padding-bottom: 10px;
        padding-top: 10px;
        padding-left: 20px;
        padding-right: 10px;
        margin-bottom: 5px;
        color: #fff;
}

/*
The following code relates to the HTML CALENDAR CONTENT
*/

/*
NORMAL
*/

#content_entry_calendar_header {
        position: relative;
        left: 20px;
        width:40%;
        min-width: 520px;
        height: 100%;
        background: #000;
        padding-top: 10px;
        padding-bottom: 1px;
        padding-left: 20px;
        padding-right: 10px;
        margin-bottom: 5px;
        color: #fff;
}

#content_entry_calendar_header3 {
        position: relative;
        width:40%;
        min-width: 540px;
        background: #000;
        padding-left: 20px;
        padding-right: 10px;
        padding-top: 5px;
        padding-bottom: 10px;
        margin-top: 10px;
        color: #fff;
}

#content_calendar_entry {
        position: relative;
        width:40%;
        min-width: 540px;
        height: 100%;
        background: #fff;
        padding-bottom: 10px;
        padding-top: 10px;
        padding-left: 20px;
        padding-right: 10px;
        color: #000;
}

/*
SPECIALS
*/

#content_entry_calendar_header_special {
        position: relative;
        width:40%;
        min-width: 540px;
        background: #6495ED;
        padding-top: 5px;
        padding-bottom: 5px;
        padding-left: 20px;
        padding-right: 10px;
        margin-top: 10px;
        color: #fff;
}

#content_entry_calendar_header3_special {
        position: relative;
        width:40%;
        min-width: 540px;
        background: #ADD8E6;
        padding-top: 5px;
        padding-bottom: 5px;
        padding-left: 20px;
        padding-right: 10px;
        color: #000;
}


#content_calendar_entry_special {
        position: relative;
        width:40%;
        min-width: 540px;
        background-color: #fff;
        padding-bottom: 10px;
        padding-top: 10px;
        padding-left: 20px;
        padding-right: 10px;
        color: #000;
}

/*
The following code relates to the SPECIAL SCREENINGS CONTENT
*/

#content_entry_special_screening_header {
        position: relative;
        left: 20px;
        width:40%;
        min-width: 540px;
        background: #000;
        padding-top: 5px;
        padding-bottom: 5px;
        padding-left: 20px;
        padding-right: 10px;
        margin-top: 10px;
        color: #fff;
}

#content_entry__special_screening_h3 {
        position: relative;
        left: 20px;
        width:40%;
        min-width: 540px;
        background: #000;
        padding-top: 5px;
        padding-bottom: 5px;
        padding-left: 20px;
        padding-right: 10px;
        color: #fff;
        margin-top: 10px;
}


#content_entry_special_screening_description {
        position: relative;
        left: 20px;
        width:40%;
        min-width: 540px;
        background-image: url('images/black_transparency.png');
        background-repeat: repeat;
        padding-bottom: 10px;
        padding-top: 10px;
        padding-left: 20px;
        padding-right: 10px;
        color: #fff;
}

#content_entry_special_screening {
        position: relative;
        left: 20px;
        width:40%;
        min-width: 540px;
        background-image: url('images/black_transparency.png');
        background-repeat: repeat;
        padding-bottom: 10px;
        padding-top: 10px;
        padding-left: 20px;
        padding-right: 10px;
        color: #fff;
}

/*
The following code relates to the SEARCHFORM
*/

#searchform_frame {
        position: relative;
        float: right;
        top: 10px;
        left: 10px;
        right: 30px;
        width: 200px;
        height: 70px;
        border: 1px solid #000;
        background-color: #222;
    }
    
#searchform_entry {
        position: relative;
        top: 10px;
        left: 10px;
        width: 268px;
        height:  46px;
        background-color: transparent;
}

fieldset.search {
	border: none;
	width: 100px;
	margin: 0 auto;
	background: #222;
}
.search input, .search button {
	border: none;
	float: left;
}
.search input.box {
	color: #000;
	font-size: 1.2em;
	width: 160px;
	height: 26px;
	padding: 2px 5px 2px;
	background: #fff url(search_bg.gif) no-repeat;
	margin-right: 5px;
}
.search input.box:focus {
	background: #fff url(search_bg.gif) no-repeat left -38px;
	outline: none;
}
.search button.btn {
	width: 75px;
	height: 30px;
	cursor: pointer;
	text-indent: -9999px;
	background: #fbc900 url(search_bg.gif) no-repeat top right;
}
.search button.btn:hover {
	background: #fbc900 url(search_bg.gif) no-repeat bottom right;
}

/*
The following code relates to the FOOTER
*/

#footer_frame {
position: relative;
top: 10px;
clear:both;
float:left;
width:100%;
background: #000;
border-top:#000;
padding-top: 10px;
padding-bottom: 20px;
}

#footer_entry {
color: #fff;
position: relative;
width:90%;
background: #000;
left: 20px;
text-align: center;
font-size: 80%;
}

/*
The following code relates to the MAIN NAV MENU
*/

#menu {
        clear:both;
        float:left;
        margin-left: 2px;
        padding-left: 20px;
        padding-top: 10px;
        width:98%;
        background-color: transparent;
	height: 30px;
	margin:0px auto; 
	position:relative;
}

#menu ul table {border-collapse:collapse; margin:-1px -10px; font-size:1em;}

#menu ul, #menu li	{
	display : inline;
	list-style-type : none;
	margin : 0;
	padding : 0;
}

#menu a:link, #menu a:visited	{
	display: block;
	text-align: center;
	text-decoration:none;
	height: 30px;
	background-image: url('images/black_transparency.png');
        background-repeat: repeat;
	color : #fff;
	line-height: 29px; 
	float: left;
        padding-left: 7px;
        padding-right: 7px;
	margin-right : 2px;
        font-size: 90%;
}

#menu a:link.active, #menu a:visited.active	{
	background : #fff;
	color : #fff;
}

#menu a:hover	{
	background : #fff;
        color : #000;
}
	 
body.section-1 #menu li#nav-1 a,
body.section-2 #menu li#nav-2 a,
body.section-3 #menu li#nav-3 a,
body.section-4 #menu li#nav-4 a,
body.section-5 #menu li#nav-5 a,
body.section-6 #menu li#nav-6 a,
body.section-7 #menu li#nav-7 a,
body.section-8 #menu li#nav-8 a {
	background-image: url('images/red_transparency.png');
        background-repeat: repeat;
	color : #fff;
}


 #menu ul a:hover {
	color : #000 !important;
}

/*
The following code relates to the SCREENINGS BROWSER
*/

.menu {
position: relative;
left: 25px;
top: 5px;
width:800px;
height:32px; position:relative; z-index:100;}

* html .menu {width:746px; w\idth:745px;} /* hack to correct IE5.5 faulty box model */

.menu ul {padding:0;margin:0;list-style-type:none;} /* remove all the bullets, borders and padding from the default list styling */
.menu ul ul {width:149px;}

.menu li {float:left;width:300px; position:relative; margin-right: 2px;} /* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */

.menu a, .menu a:visited {display:block; text-decoration:none; color:#FF0000; width:290px; height:30px; background-image: url('images/white_transparency.png'); 
        background-repeat: repeat; padding-left:10px; line-height:29px; text-align: center;} /* style the links for the top level */

* html .menu a, * html .menu a:visited {width:149px; w\idth:138px;} /* a hack so that IE5.5 faulty box model is corrected */

.menu ul ul a.drop, .menu ul ul a.drop:visited {background:#000} /* style the second level background */

.menu ul ul a.drop:hover{background:#c9ba65} /* style the second level hover */
.menu ul ul :hover > a.drop {background:#c9ba65}

.menu ul ul {visibility:hidden; position:absolute; top:30px; left:0; width:387px; border-top:1px solid #000; height:300px; overflow:auto ;} /* hide the sub levels and give them a positon absolute so that they take up no room */

* html .menu ul ul {top:30px;t\op:31px;} /* another hack for IE5.5 */

.menu table {position:absolute; top:0; left:0; border-collapse:collapse;} /* style the table so that it takes no ppart in the layout - required for IE to work */

.menu ul ul a, .menu ul ul a:visited {background:#fff; color:#000; height:auto; line-height:1em; padding:10px 10px; width:350px; border-bottom: 1px solid #000;} /* style the second level links */

* html .menu ul ul a, * html .menu ul ul a:visited {width:150px;w\idth:128px;} /* yet another hack for IE5.5 */

.menu a:hover, .menu ul ul a:hover{color:#fff; background:#000;} /* style the top level hover */
.menu :hover > a, .menu ul ul :hover > a {color:#fff; background:#000;}

.menu ul li:hover ul,
.menu ul a:hover ul{visibility:visible; } /* make the second level visible when hover on first level list OR link */



/*
The following code relates to the GENERAL FRAMES & BACKDROPS
*/

#general_frame_home {
        position: relative;
        padding-top: 0px;
        margin-top: 0px;
        clear:both;
        float:left;
        width: 100%;
        background-image: url('images/ashes_backdrop.jpg');
        background-repeat: no-repeat;
}

#general_frame_about {
        position: relative;
        padding-top: 0px;
        margin-top: 0px;
        clear:both;
        float:left;
        width: 100%;
	  background-color: #000;
        background-image: url('images/rochefort_backdrop.jpg');
        background-repeat: no-repeat;
}

#general_frame_screenings {
        position: relative;
        padding-top: 0px;
        margin-top: 0px;
        clear:both;
        float:left;
        width: 100%;
	  background-color: #000;
        background-image: url('images/chamber_backdrop2.jpg');
        background-repeat: no-repeat;	  
}

#general_frame_cteq_annotations {
        position: relative;
        padding-top: 0px;
        margin-top: 0px;
        clear:both;
        float:left;
        width: 100%;
	  background-color: #000;
        background-image: url('images/roma_backdrop.jpg');
        background-repeat: no-repeat;
}

#general_frame_ticketing_and_venue {
        position: relative;
        padding-top: 0px;
        margin-top: 0px;
        clear:both;
        float:left;
        width: 100%;
	  background-color: #000;
        background-image: url('images/cuckoo_backdrop.jpg');
        background-repeat: no-repeat;
}

#general_frame_media_and_support {
        position: relative;
        padding-top: 0px;
        margin-top: 0px;
        clear:both;
        float:left;
        width: 100%;
	  background-color: #000;
        background-image: url('images/samurai_backdrop1.jpg');
        background-repeat: no-repeat;
}

#general_frame_contacts {
        position: relative;
        padding-top: 0px;
        margin-top: 0px;
        clear:both;
        float:left;
        width: 100%;
	  background-color: #000;
        background-image: url('images/la_ronde_backdrop.jpg');
        background-repeat: no-repeat;
}

/*
The following code relates to the SPECIAL SEASON BACKDROPS & FRAMES
*/

#general_frame_fellini {
        position: relative;
        padding-top: 0px;
        margin-top: 0px;
        clear:both;
        float:left;
        width: 100%;
	  background-color: #000;
        background-image: url('images/fellini_backdrop.jpg');
        background-repeat: no-repeat;
}

#general_frame_landscapes {
        position: relative;
        padding-top: 0px;
        margin-top: 0px;
        clear:both;
        float:left;
        width: 100%;
	  background-color: #000;
        background-image: url('images/landscapes_backdrop.jpg');
        background-repeat: no-repeat;
}

#general_frame_demy {
        position: relative;
        padding-top: 0px;
        margin-top: 0px;
        clear:both;
        float:left;
        width: 100%;
	  background-color: #000;
        background-image: url('images/demy_backdrop.jpg');
        background-repeat: no-repeat;
}

#general_frame_kurosawa {
        position: relative;
        padding-top: 0px;
        margin-top: 0px;
        clear:both;
        float:left;
        width: 100%;
	  background-color: #000;
        background-image: url('images/kurosawa_backdrop.jpg');
        background-repeat: no-repeat;
}

#general_frame_forman {
        position: relative;
        padding-top: 0px;
        margin-top: 0px;
        clear:both;
        float:left;
        width: 100%;
	  background-color: #000;
        background-image: url('images/forman_backdrop.jpg');
        background-repeat: no-repeat;
}

#general_frame_perestroika {
        position: relative;
        padding-top: 0px;
        margin-top: 0px;
        clear:both;
        float:left;
        width: 100%;
	  background-color: #000;
        background-image: url('images/perestroika_backdrop.jpg');
        background-repeat: no-repeat;
}

#general_frame_delon {
        position: relative;
        padding-top: 0px;
        margin-top: 0px;
        clear:both;
        float:left;
        width: 100%;
	  background-color: #000;
        background-image: url('images/delon_backdrop.jpg');
        background-repeat: no-repeat;
}

#general_frame_cheung {
        position: relative;
        padding-top: 0px;
        margin-top: 0px;
        clear:both;
        float:left;
        width: 100%;
	  background-color: #000;
        background-image: url('images/cheung_backdrop.jpg');
        background-repeat: no-repeat;
}

#general_frame_depardon {
        position: relative;
        padding-top: 0px;
        margin-top: 0px;
        clear:both;
        float:left;
        width: 100%;
	  background-color: #000;
        background-image: url('images/depardon_backdrop.jpg');
        background-repeat: no-repeat;
}

#general_frame_lubitsch {
        position: relative;
        padding-top: 0px;
        margin-top: 0px;
        clear:both;
        float:left;
        width: 100%;
	  background-color: #000;
        background-image: url('images/lubitsch_backdrop.jpg');
        background-repeat: no-repeat;
}

#general_frame_zanussi {
        position: relative;
        padding-top: 0px;
        margin-top: 0px;
        clear:both;
        float:left;
        width: 100%;
	  background-color: #000;
        background-image: url('images/zanussi_backdrop.jpg');
        background-repeat: no-repeat;
}

/*
OTHER SCREENINGS
*/

#general_frame_feb_10 {
        position: relative;
        padding-top: 0px;
        margin-top: 0px;
        clear:both;
        float:left;
        width: 100%;
	  background-color: #000;
        background-image: url('images/montes_backdrop.jpg');
        background-repeat: no-repeat;
}

#general_frame_feb_17 {
        position: relative;
        padding-top: 0px;
        margin-top: 0px;
        clear:both;
        float:left;
        width: 100%;
	  background-color: #000;
        background-image: url('images/boyfriends_backdrop.jpg');
        background-repeat: no-repeat;
}

#general_frame_feb_24 {
        position: relative;
        padding-top: 0px;
        margin-top: 0px;
        clear:both;
        float:left;
        width: 100%;
	  background-color: #000;
        background-image: url('images/knocking_backdrop.jpg');
        background-repeat: no-repeat;
}

#general_frame_mar_24 {
        position: relative;
        padding-top: 0px;
        margin-top: 0px;
        clear:both;
        float:left;
        width: 100%;
	  background-color: #000;
        background-image: url('images/leaves_backdrop.jpg');
        background-repeat: no-repeat;
}

#general_frame_apr_14 {
        position: relative;
        padding-top: 0px;
        margin-top: 0px;
        clear:both;
        float:left;
        width: 100%;
	  background-color: #000;
        background-image: url('images/kino_backdrop.jpg');
        background-repeat: no-repeat;
}

#general_frame_jun_23 {
        position: relative;
        padding-top: 0px;
        margin-top: 0px;
        clear:both;
        float:left;
        width: 100%;
	  background-color: #000;
        background-image: url('images/freaks_backdrop.jpg');
        background-repeat: no-repeat;
}

#general_frame_nov_17 {
        position: relative;
        padding-top: 0px;
        margin-top: 0px;
        clear:both;
        float:left;
        width: 100%;
	  background-color: #000;
        background-image: url('images/vietnam_backdrop.jpg');
        background-repeat: no-repeat;
}

#general_frame_nov_24 {
        position: relative;
        padding-top: 0px;
        margin-top: 0px;
        clear:both;
        float:left;
        width: 100%;
	  background-color: #000;
        background-image: url('images/phantom_backdrop.jpg');
        background-repeat: no-repeat;
}

/*
The following code relates to the BACKDROP ANNOTATIONS
*/

#annotation {
        position: absolute;
        font-size: 90%;
        bottom: 160px;
        right: 10px;
        padding: 10px;
        width: 140px;
        color: #fff;
	 background-color: #333;
}