/************************************************************************************************
Master CSS document for festiberico.net
Author: P. Borges
Date: 03.2006 04.2008
Mnemonic: top right bottom left
On some containers padding was added to
, which looks weird but is due to the fact
that IE is not w3 compliant and considers margin and padding part of the width attibute. This way
the output of IE will be similar to the compliant browsers (only horizontally).
Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!!
../../../Festiberico12/Festiberico_images/scripts/festimage_css generates festiberico.css
BG_COLOUR__ #f7f7f6 background colour
COLOUR_1__ #000000 background colour main menu
FONT_COLOUR_1__ #FFFFFF colour of font when background is COLOUR 1
COLOUR_2__ #d00000 background secondary menu
FONT_COLOUR_2__ #FFFFFF colour of font when background is COLOUR 2
COLOUR_LINK__ #0000BB Colour of general link
COLOUR_SLANG__ #000063 Colour of selected language
LIGHT_COLOUR__ #DEE7EF A compatible light colour
MEDIUM_COLOUR__ #9CAAC6 A compatible darker than light colour
COLOUR_BORDER_T__ #FFFFFF Colour border top
COLOUR_BORDER_R__ #FFFFFF Colour border right
COLOUR_BORDER_B__ #FFFFFF Colour border bottom
COLOUR_BORDER_L__ #FFFFFF Colour border left
NEWS_FONT_FAMILY__Helvetica, Arial, sans-serif Font family for the News Items
NEWS_FONT_COLOUR__#2f2727 Colour of the news font
*************************************************************************************************/
/************************************************************************************************
General Styles
*************************************************************************************************/
.webiberico{
display: none;
/* color: green !important; */
}
body {
background-color: #f7f7f6; /* This year initial colour */
margin:0px;
}
p,h1,h2,h3 {
color: black;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
text-align: left;
}
a:link,
a:visited {
color: #0000BB;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
border-style: none;
}
img {
border-style: none;
}
/************************************************************************************************
top_container
For logos and menus
*************************************************************************************************/
div.top_container {
width: 780px;
height: 92px; /* alterado de 92 */
text-align: left;
clear: both;
border: solid;
border-width: 0px;
position: relative;
background-color: white;
}
div.festibericologo {
float: left;
width: 780px;
margin: 0;
}
#xx_logo{position:absolute; top:15px; left:80px; }
#xx_empty{position:absolute; top:0px; left:0px;}
#xx_en { position:absolute; top:20px; left:420px; }
#xx_pt { position:absolute; top:20px; left:420px; }
#xx_nl { position:absolute; top:20px; left:420px; }
#xx_es { position:absolute; top:20px; left:420px; }
#xx_en2{ position:absolute; top:20px; left:420px;}
div.time_and_place {
width: 200px;
margin: 0px;
position: absolute;
left: 0px;
bottom: 4px;
white-space: nowrap;
color: black;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
div.social_media {
width:80px;
margin: 0px;
position: absolute;
right: 0px;
bottom: 22px;
white-space: nowrap;
text-align: right;
}
div.language_selector {
width: 250px;
text-align: right;
margin: 0px;
position: absolute;
right: 0px;
bottom: 4px;
white-space: nowrap;
}
div.language_selector a:link,
div.language_selector a:visited {
font-weight: bold;
color: black;
font-size: 11px;
}
div.language_selector a:hover {
color: #d00000;
text-decoration: none;
}
div.language_selector a.current{
font-weight: bold;
color: #000063;
text-decoration: underline;
}
/************************************************************************************************
navigation bar
Will contain menus (except language selector)
*************************************************************************************************/
div.navigation_bar{
width: 780px;
height: 50px;
margin: 0px;
clear: both;
position: relative;
/* border: solid;
border-width: 1px; */
}
/************************************************************************************************
mainmenu
Contains the main menu...
*************************************************************************************************/
div.mainmenu {
width: 780px;
height: 30px;
/* background-color: #ff8c00; /* DarkOrange */
/* background-color: #ffa500; /* Orange */
/* background-color: #daa520; /* GoldenRod */
background-color: #000000;
margin: 0px;
}
div.mainmenu ul{
position:relative;
margin: 0px;
padding: 0px;
height: 30px;
float: left;
list-style-type: none;
font-size: 14px;
}
div.mainmenu ul li{
display: inline;
float: left;
white-space: nowrap;
}
div.mainmenu ul li a:link,
div.mainmenu ul li a:visited
{
line-height:30px;
height:30px;
display: block;
text-align: center;
font-weight: bold;
color: #FFFFFF;
}
div.mainmenu ul li a.home { width: 5.5em; }
div.mainmenu ul li a.program { width: 6.5em; }
div.mainmenu ul li a.info { width: 7.5em; }
div.mainmenu ul li a.contact { width: 6em; }
div.mainmenu ul li a.sponsors{ width: 8.5em; }
div.mainmenu ul li a.editions{ width: 6.5em; }
div.mainmenu ul li a.current:visited,
div.mainmenu ul li a.current:link
{
color: #FFFFFF;
background-color: #d00000;
}
div.mainmenu ul li a:hover{
color: #000000;
background-color: #ffffff;
}
div.mainmenu ul li a.current:hover{
color: #000;
background-color: white;
}
/************************************************************************************************
submenu
Contains the sub menu...
*************************************************************************************************/
div.submenu {
width: 780px;
height: 20px;
/* background-color: #a0522d; */ /* Sienna */
/* background-color: #8b4513 */ /* Saddlebrown */
background-color: #d00000; /* Web safe color */
font-size: 13px;
}
div.submenu ul{
margin: 0px;
padding: 0px;
height: 20px;
line-height:20px;
float: left;
list-style-type: none;
border-width:0;
}
/* Indentation for submenu depends on which submenu is active */
div.submenu ul.home{ padding-left: 0em;}
div.submenu ul.program{ padding-left: 5.923em;}
div.submenu ul.info{ padding-left: 12.923em;}
div.submenu ul li{
display: inline-block;
float: left;
line-height:20px;
height:20px;
white-space: nowrap;
}
div.submenu ul li a:link,
div.submenu ul li a:visited
{
display: inline-block; /* inline-block: IE, Konq, IE6 not perfect firefox
inline: IE
block: Fir Konq
list-item: Firefox IE Konq not IE6.0
*/
line-height:20px;
height: 20px;
border:none;
font-size: 13px;
text-align: center;
font-weight: bold;
color: white;
margin:0px;
padding: 0px;
}
div.submenu ul li a:hover{
color: #000;
background-color: white;
border: 1px solid white;
}
div.submenu ul li a.current:visited,
div.submenu ul li a.current:link
{
color: #000;
background-color: white;
border: 1px solid white;
}
div.submenu ul li a.current:hover{
color: #000;
background-color: white;
border: 1px solid white;
}
/************************************************************************************************
main_container
*************************************************************************************************/
div.main_container {
margin: 12px 0px 0px 0px;
padding: 0px;
position: relative;
clear: both;
width: 780px;
/* border: solid;
border-width: 1px; */
}
/************************************************************************************************
news_container
For use in the HOME section
TOTAL width should be ...520px (incl border)
*************************************************************************************************/
div.news_container {
margin: 0px 0px 0px 0px;
padding: 13px 0px 13px 0px;
background-color: white;
float:left;
width: 518px;
min-height: 600px;
border: solid;
border-width: 1px;
border-color: #FFFFFF #FFFFFF #FFFFFF #FFFFFF;
}
div#hidden_wrapper{
display: none;
}
div.news_item{
margin: 5px 5px 5px 5px;
/* Avoid vertical colapse
http://www.table2css.com/articles/vertical-margin-collapsing-modern-web-browsers */
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
}
div.news_text_long{
display: none;
}
div.news_link{ /* to bypass problem in IE9 so that hover works*/
background-color: white;
}
div.news_link:hover{
background-color: #DEE7EF;
}
div.news_container h1{
font-size: 18px;
margin: 15px 10px 10px 10px;
text-align: left;
text-transform: none;
font-weight:bold;
color: #9CAAC6;
}
div.news_container h2{
font-size: 14px;
margin: 15px 10px 0px 10px;
text-align: left;
text-transform: uppercase;
font-weight:bold;
color: black;
}
div.news_item h2{
margin: 5px 5px 0px 5px;
}
div.news_container h3{ /* for administration mode=all_lang */
font-size: 15px;
margin: 15px 0px 5px 5px;
text-align: left;
font-weight:bold;
color: #f90;
}
div.news_container a:link,
div.news_container a:visited {
color: #0000BB;
}
div.news_item p{
margin: 0px 0px 10px 5px;
text-transform: none;
font-weight: normal;
font-family: Helvetica, Arial, sans-serif;
color: #2f2727;
}
div.news_item a{
font-family: Helvetica, Arial, sans-serif;
color: #d00000;
cursor: hand;
cursor: pointer;
}
div.news_container p.intro{
margin: 6px 10px 0px 10px;
}
div.news_container p em{
font-weight: bold;
font-style: normal;
}
div.news_container p em.foreign{
font-weight: normal;
font-style: italic;
}
div.news_container ul,
div.news_container li,
div.news_container li p{
padding-top:0px;
margin-top: 0px;
padding-bottom: 0px;
margin-bottom: 0px;
}
div.news_container p.short{
text-align:center;
}
/************************************************************************************************
Information_container
For use in the INFORMATION menu
TOTAL width should be ...520px (incl border)
*************************************************************************************************/
div.information_container {
margin: 0;
padding: 13px 0px 13px 0px;
background-color: white;
float: left;
width: 518px;
min-height: 300px;
border: solid;
border-width: 1px;
border-color: #FFFFFF #FFFFFF #FFFFFF #FFFFFF;
}
div.information_container h1{
margin-top: 1.5em;
margin-bottom: 1.5em;
margin-right: 12px;
margin-left: 12px;
text-align: center;
/*text-transform: capitalize; */
font-weight:bold;
font-size: 16px;
color: black;
}
div.information_container h2{
margin-top: 1.5em;
margin-bottom: 0em;
margin-right: 12px;
margin-left: 12px;
text-align: left;
text-transform: none;
font-weight:bold;
font-size: 13px;
}
div.information_container p{
margin-top: 0.5em;
margin-right: 12px;
margin-left: 12px;
text-transform: none;
font-weight: normal;
}
div.information_container p.short{
text-align:center;
}
div.information_container li p{
margin-top: 0px;
margin-bottom: 4px;
}
div.information_container ul{
margin-top: 0.6em;
}
div.information_container p em.attention{
font-weight: bold;
font-style: normal;
}
div.information_container p em.foreign{
font-style: italic;
}
/****************************************************************************************
lumen_logo_container
Box where Lumens logo will be placed
I guess there are 260 pixels left to the left... in HOME and INFORMATION
*******************************************************************************************/
div.lumen_logo_container{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
float: right;
background-color: white;
width: 248px;
}
div.lumen_logo_container:hover{
background-color: #dee7ef;
}
div.lumen_logo_container p{
margin: 10px 7px 7px 13px;
}
div.lumen_logo_container p em{
font-weight: bold;
font-style: normal;
}
div.lumen_logo_container_narrow{ /* for the program schedulle page */
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
float: right;
width: 208px;
}
/****************************************************************************************
motd_container
For the Message of the Dday
I guess there are 260 pixels left to the left... in HOME and INFORMATION
*******************************************************************************************/
div.motd_container{
margin: 0px 0px 12px 0px;
padding: 12px 0px 12px 0px;
float: right;
width: 246px;
background-color: white;
border: solid;
border-width: 1px;
border-color: #FFFFFF #FFFFFF #FFFFFF #FFFFFF;
}
div.motd_container p {
margin: 0px 12px 0px 12px;
color: #000066;
font-size: 12px;
font-weight: bold;
}
div.motd_container p.small {
text-align: center;
}
div.motd_container p em{
font-style: italic;
}
div.motd_container h3{ /* for administration mode=all_lang */
margin: 0px 12px 0px 12px;
font-size: 15px;
font-weight:bold; text-decoration: underline;
color: #f90;
}
div.motd_container a{
text-decoration: underline;
}
/****************************************************************************************
Styles for the calendar
I guess there are 260 pixels left to the left... in HOME and INFORMATION
*******************************************************************************************/
div.calendar_container{
margin-top: 12px;
float: right;
width: 248px;
border: none;
}
div.calendar_container_narrow{ /* A special, narrow container for the schedulle page*/
margin-top: 12px;
float: right;
width: 208px;
border: none;
}
div.calendar_container table,
div.calendar_container_narrow table
{
/* float: center; */
margin: 0px;
padding: 0px;
background-color: white;
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
text-align: right;
border: solid;
border-width: 1px;
border-color: #FFFFFF #FFFFFF #FFFFFF #FFFFFF;
border-collapse: collapse;
}
div.calendar_container table thead,
div.calendar_container_narrow table thead
{
text-align: center;
font-weight: bold;
}
div.calendar_container table td,
div.calendar_container_narrow table td
{
padding: 2px 5px;
}
div.calendar_container table thead tr td,
div.calendar_container_narrow table thead tr td{
border-bottom: solid 1px;
border-bottom-color: #8B4513;
font-weight: normal;
padding: 4px 2px 2px 2px;
}
div.calendar_container table td.festiberico,
div.calendar_container_narrow table td.festiberico
{
background-color: #DEE7EF; /* web safe yellow */
}
div.calendar_container table td.March,
div.calendar_container table td.May,
div.calendar_container_narrow table td.March,
div.calendar_container_narrow table td.May
{
color: #fc9; /* web safe color */
}
div.calendar_container table td.April,
div.calendar_container_narrow table td.April{
color: #8B4513;
}
div.calendar_container table td a,
div.calendar_container_narrow table td a{
color: inherit;
}
/****************************************************************************************
small_trailer_container
For a trailer at the HOME page
I guess there are 260 pixels left to the left... in HOME and INFORMATION
*******************************************************************************************/
div.small_trailer_container{
margin: 12px 0px 12px 0px;;
padding: 1px 0px 0px 0px;
float: right;
width: 248px;
}
/****************************************************************************************
iotd_container
Image Of The Day
For a movie image at the HOME page
I guess there are 260 pixels left to the left... in HOME and INFORMATION
*******************************************************************************************/
div.iotd_container{
margin: 0px 0px 12px 0px;;
padding: 0px 0px 0px 0px;
float: right;
width: 248px;
border-style: none; /*solid*/
/* With border the width of images was 246
border-width: 1px;
border-color: #FFFFFF #FFFFFF #FFFFFF #FFFFFF;
*/
}
/****************************************************************************************
Social Media boxes (except banner)
*******************************************************************************************/
div.twitter_widget_container{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
float: right;
width: 248px;
}
div.social_media_container{
margin: 12px 12px 12px 0px;
padding: 0px 0px 0px 0px;
float: right;
width: 246px;
background-color: white;
border: solid;
border-width: 1px;
border-color: #FFFFFF #FFFFFF #FFFFFF #FFFFFF;
}
/****************************************************************************************
Forms
*******************************************************************************************/
input[type="submit"] {
background-color: #9CAAC6;
color:white;
font-weight:bold;
}
input[type="reset"] {
background-color: #9CAAC6;
color:white;
/*font-weight:bold;*/
}
/************************************************************************************************
programme_container
For use in the Program menu
TOTAL width should be ...520px (incl border)
*************************************************************************************************/
div.programme_container {
margin: 0px 0px 0px 0px;
padding: 13px 0px 13px 0px;
float: left;
width: 518px;
border: solid;
border-width: 1px;
border-color: #FFFFFF #FFFFFF #FFFFFF #FFFFFF;
background-color: white;
}
div.programme_container h1{
font-size: 18px;
margin: 15px 10px 20px 10px;
text-align: left;
text-transform: none;
font-weight:bold;
color: #9CAAC6;
}
/*div.programme_container h1{
margin-top: 1.5em;
margin-bottom: 1em;
margin-right: 12px;
margin-left: 12px;
text-align: left;
font-weight:bold;
font-size: 16px;
color: black;
}*/
div.programme_container h3{
margin: 0 12px 1em 12px;
text-align: center;
font-weight: bold;
font-size: 14px;
color: black;
}
div.programme_container p{
margin-top: 0px;
margin-right: 12px;
margin-left: 12px;
margin-bottom: 0px;
font-weight: normal;
color: #000066;
}
div.programme_container p span.language{
font-size: 11px;
}
div.programme_container a{
font-weight: bold;
}
div.programme_container a.short{
font-weight: normal;
}
div.programme_container p.a_z_movie{
margin-left: 10%;
margin-bottom: 0.2em;
}
/************************************************************************************************
Schedulle_container
For use in the schedule submenu
TOTAL width should be ...560px (incl border)
*************************************************************************************************/
div.schedulle_container {
margin: 0px 0px 0px 0px;
padding: 13px 0px 13px 0px;
background-color: white;
float:left;
width: 558px;
border: solid;
border-width: 1px;
border-color: #FFFFFF #FFFFFF #FFFFFF #FFFFFF;
}
div.schedulle_container h1{
font-size: 18px;
margin: 15px 10px 20px 10px;
text-align: left;
text-transform: none;
font-weight:bold;
color: #9CAAC6;
}
/*
div.schedulle_container h1{
margin-top: 1.5em;
margin-bottom: 1em;
margin-right: 12px;
margin-left: 12px;
text-align: left;
font-weight:bold;
font-size: 16px;
color: black;
}
*/
div.schedulle_container h2{
margin-left:12px;
font-weight:bold;
}
div.schedulle_container table td{
padding:0 ;
overflow: hidden;
}
div.schedulle_container table p{
margin: 0px 0.5em 0px 0.7em;
font-weight: normal;
color: black;
}
div.schedulle_container table p.date{
font-size: 13px;
white-space: nowrap;
color: black;
}
div.schedulle_container table p.hour{
font-size: 13px;
white-space: nowrap;
color: black;
}
div.schedulle_container table p.guest{
/*color: red;*/
font-weight: bold;
white-space: nowrap;
/*background-color: #ffff33; /* web safe yellow */
}
div.schedulle_container table p.remark{
color: #d00000;
font-weight: bold;
text-transform: uppercase;
}
div.schedulle_container table p a{
font-weight: bold;
text-transform: uppercase;
}
div.schedulle_container table p a.special{
font-weight: bold;
text-transform: uppercase;
}
div.schedulle_container table p a.short{
font-weight: normal;
text-transform: none;
}
div.schedulle_container table p span.language{
font-size: 11px;
}
/************************************************************************************************
footer_container
*************************************************************************************************/
div.footer_container {
width: 780px;
margin: 12px 0px 0px 0px;
padding: 0px 0px 0px 0px;
float: left;
clear: both;
border: none; /*solid;*/
border-width: 1px;
border-color: #FFFFFF #FFFFFF #FFFFFF #FFFFFF;
background-color: #f7f7f6; /* Web safe color */
}
div.footer_container p {
margin: 0.5em 1.2em 0.5em 1.2em;
text-align: center;
font-weight: bold;
color: #2f2727;
margin:1px;
padding: 1px;
}
div.footer_container p a {
color: #d00000;
}
/************************************************************************************************
MOVIE PAGES
Bellow are the styles to be used in the movie pages.
main_container width is 780px
*************************************************************************************************/
div.left_column{
width: 498px;
float: left;
margin: 0;
padding: 12px 0 0 0;
border: solid;
border-width: 1px;
border-color: #FFFFFF #FFFFFF #FFFFFF #FFFFFF;
background-color: white ;
}
div.title_box{
/* height: 60px; */
border: none;
margin: 14px 0px 14px 0px;
padding: 0;
}
div.title_box h1{
margin: 0px 10px 0px 20px;
text-transform: uppercase;
font-weight:bold;
font-size: 20px;
color: #000066;
position: relative; /* So that things can be positioned inside */
}
div.title_box h1 div{
position: absolute;
top:0;
right:0;
margin: 0px 20px 0px 0px;
font-size: 24px;
color: #960;
}
div.title_box h1 div a:link,
div.title_box h1 div a:visited{
color: #8B4513;
}
div.title_box h2{
margin: 0.3em 20px 0px 20px;
padding: 0;
text-transform: uppercase;
font-weight: normal;
font-size: 16px;
color: #000066;
}
div.image_box{
padding: 0px 0px 0px 20px;
margin: 0;
float: left;
height: 250px;
border: none;
}
div.info_box{
float: left;
margin: 20px 0px 20px 0px;
padding: 0;
width: 498px;
}
div.info_box p{
margin: 0 0 0 20px;
padding:0;
}
div.sinopse_box{
float: left;
margin: 0px 0px 0px 0px;
padding: 0;
width: 498px;
border: none;
}
div.sinopse_box div.individual_sinopse{
float: left;
margin: 10px 0px 20px 0px;
padding: 0;
width: 498px;
border: none;
}
div.sinopse_box div.individual_sinopse div.lang{
float: left;
font-weight:bold;
font-size: 18px;
width: 56px;
border: none;
}
div.sinopse_box div.individual_sinopse div.lang p{
margin: 0px 0px 0px 20px;
text-align: center;
/*padding: 0px 0em 0px 0.2em;*/
/*background-color: #960;*/
background-color: #9CAAC6;
color: white;
}
div.sinopse_box div.individual_sinopse div.text{
float: left;
width: 442px;
border: none;
}
div.sinopse_box div.individual_sinopse div.text p{
margin: 0px 1.5em 0em 1.2em;
padding: 0;
font-size: 14px;
font-weight:normal;
}
div.sinopse_box div.individual_sinopse div.text p.guest{
color: #d00000;
/*font-weight:bold;*/
}
div.datas_box{
margin: 0;
padding: 12px 0px 12px 0px;
float: right;
width: 266px;
text-align: left;
border: solid;
border-width: 1px;
border-color: #FFFFFF #FFFFFF #FFFFFF #FFFFFF;
background-color: white ;
}
div.datas_box p{
font-size: 20px;
padding:0;
margin: 0.5em 0em 0.4em 0em;
text-align: center;
font-weight:bold;
color: #d00000;
}
div.credits_box{
margin: 13px 0px 0px 0px;
padding: 12px 0px 12px 0px;
float: right;
width: 266px;
text-align: left;
border: solid;
border-width: 1px;
border-color: #FFFFFF #FFFFFF #FFFFFF #FFFFFF;
background-color: white ;
}
div.credits_box h1{
font-size: 18px;
font-weight: bold;
text-align: left;
padding: 0;
margin: 0.2em 0px 0.5em 20px;
color: #000066;
}
div.credits_box h2{
font-size: 14px;
font-weight: normal;
text-align: left;
padding: 0;
margin: 0px 0px 1.2em 20px;
color: #000066;
}
div.credits_box table td{
vertical-align: top;
}
div.credits_box p{
padding-right: 5px;
font-size: 12px;
}
div.credits_box p.item{
padding-left: 10px;
font-weight: bold;
text-align: right;
}
div.movie_trailer_container{
margin: 13px 0px 0px 0px;
padding: 0px 0px 0px 0px;
float: right;
width: 266px;
}
div.movie_poster_container{
margin: 13px 0px 0px 0px;
padding: 0px 0px 0px 0px;
float: right;
width: 264px;
}
/************************************************************************************************
logos_container
Assuming that main_container is 780px wide
*************************************************************************************************/
div.logos_container {
margin: 0px;
padding: 13px 0px 0px 0px;
position: relative;
clear: both;
width: 780px;
/* border: solid;
border-width: 1px; */
}
div.logos_container img {
padding: 5px;
margin: 0px;
float: left;
}
/************************************************************************************************
twitter
*************************************************************************************************/
div.twtr-tweet-text{
font-size: 12px;
}