/*Style for DIFS webpages*/
/*Basic declarations first which work on small mobile screens, then scaling up the screen size using min-width media query
queries. Note that the sheet ddmenu.css for the menu works the other way round: basic declarations for desktops and 
a max-width media query for small mobile screens'*/

body {
background-color:rgba(218,218,218,1);
margin:0;
padding:0;
font:normal 1.0em arial,sans-serif;
}

/*  DIVS  */
#container {
margin:0 auto;
background-color:rgba(128, 128, 128, 1);
width:100%;
max-width:920px;
}


#header {
position:relative;
width:100%;
height:150px;
background:url( '../image/difs_banner_logo_mobile.jpg ') no-repeat;
border-bottom: solid 6px #98bf21;
}

.page_title
{
    width: 100%;
    text-align: center;
    color:white;
    padding: 0.2em;
    margin-top: -6px;
    background-color: #98bf21;
    font:bold 1.3em arial,sans-serif;
}
        
#main {
width:100%;
}

#main_left {
float:left;
width:100%;
background: url('../image/difs_logo_200.png');
background-color:aqua;
background-size:100% 100%;
position:relative;
}

#main_right
{
float:left;
width:100%;
position:relative;

}
#fb_badge{
display:block;
margin:0.6em;
}


#box {
position:absolute;
right:10px;
top:10px;
z-index:2;
display:block;
background-color:#8F8F8F;
color:#FFFFFF;
opacity:0.9;
filter:alpha(opacity=90); /* For IE8 and earlier */
font:bold 0.8em arial,sans-serif;
padding:0.8em;
cursor:pointer
}

#film_text {
display:none;
position:absolute;
right:10px;
top:10px;
width:60%;
z-index:2;
background-color:#8F8F8F;
border:solid #D3D3D3 1px;
opacity:0.9;
filter:alpha(opacity=90); /* For IE8 and earlier */
color:#FFFFFF;
font:normal 0.8em arial,sans-serif;
padding:0.8em;
cursor:pointer
}

#event_text {
font:normal 1.0em arial,sans-serif;
}

#footer {
clear:both;
padding:1em;
background-color:#4f4f4f;
color:#FFFFFF;
text-align:center;
font:normal 0.9em arial,sans-serif;
}


#counter {
clear:both;
background-color:inherit;
text-align:center;
font:bold 1.0em arial,sans-serif;
}

/*Miscellaneous*/
p.standard {
font:normal 0.8em verdana,sans-serif;
color:#FFFFFF;
padding:10px;
margin:10px;
}

    ul.film_text {
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
    }
    
    a.btCancel {
    float:right;
    width:32px;
    height:32px;
    background:transparent url(../image/cancel.png) top left;
    margin-top:-16px;
    margin-right:-20px;
    cursor:pointer;
    }

    ul.recipe li
    {
        text-decoration: none;
        font: normal 0.8em verdana, sans-serif;
        color: #FFFFFF;
    }
    
    div.video
    {
        width:90%;
        margin:10px auto;
        
    }
    
    /*  Coming Soon Page
            see linkbar styling for basic style of the event list*/
    
       
    #comsoon ul li div.panel
    {
        width: 95%;
        margin: 10px auto;
        background:rgba(96, 96, 96, 1);
        border:solid 1px rgba(80, 80, 0, 1);
        border-radius:2px;
    }
     
     #comsoon .image-container
     {
        width: 100%;
     }
     
     #comsoon ul ul.event_text
     {
        padding:0.3em 0;
     }
     
     #comsoon ul img
     {
        width:100%;
        display:block;
        background-color:inherit;
     }
     
    

/*  LINKS - there's another level of link styling in 
ddmenu.css  */

a.main
{
font: bold 1.0em arial, sans-serif;
}

a.main:link
{text-decoration: none; color: #FFCC00;}
a.main:visited
{text-decoration: none; color: #FFCC00;}
a.main:active
{text-decoration: underline; color: #FFCC00;}


/*  IMAGES   */
img {
margin:0;
padding:0;
border:0;
}

img.img_main {
width:100%;
display:block;
z-index:1;
}


    img.poster_left
    {
        display:block;
        width: 96%;
        margin: 0 auto;
        padding: 0;
    }
    img.poster_right
    {
        display:block;
        width: 96%;
        margin: 0 auto;
        padding: 0;
    }
    
    img.ratings
    {
        width:100%;
        margin: 0;
    }
    
    
/*  CONTACT FORM  */    

    div.form
    {
        width:100%;
        
    }
    
    form.contact ul
    {
        margin: 0;
        padding: 0;
    }
    
    form.contact li
    {
        font: normal 0.8em arial, sans-serif;
        list-style: none;
        padding: 5px;
        margin: 0;
    }
    
    form.contact li.message
    {
        font: bold 1.0em  arial, sans-serif ;
        color: #AE3333;
    }
    form.contact label
    {
        display: inline-block;
        line-height: 1.5;
        vertical-align: top;
        width: 120px;
    }
    
    .styled_button 
    {
	color:#333;
	background-color:rgba(255, 204, 0, 1);/*Equals:#ffcc00*/
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border:solid 1px rgba(128, 102, 1, 1);
    font-family:'Helvetica Neue',Arial,sans-serif;
	font-size:1.8em;
	font-weight:700;
	padding:0.5em 16px;
	width:100%;
    }
    
      
    
    
/*  EVENT TEXT  */
ul.event_text {
list-style-type:none;
margin:0;
padding:0.6em 0.6em 1.2em 0.6em;
overflow:hidden;
}

li.feature {
font:bold 1.5em arial,sans-serif;
}

ul.event_text li.feature span.rating a:link {
font:normal 0.4em arial,sans-serif;
color:#FFCC00;
text-decoration:none;
}

li.support {
font:italic 0.8em arial,sans-serif;
}

ul.event_text li.support span.rating a:link {
font:normal 0.8em arial,sans-serif;
color:#FFCC00;
text-decoration:none;
}

li.featureAltTitle {
font:bold 0.9em arial,sans-serif;
}

li.date {
font:bold 1.2em arial,sans-serif;
/*color:#FFFFFF;*/
}

li.venue {
font:bold 1.0em arial,sans-serif;
/*color:#FFFFFF;*/
}

li.time {
font:bold 1.0em arial,sans-serif;
/*color:#FFFFFF;*/
}

li.event_text {
font:normal 0.9em arial,sans-serif;
/*color:#FFFFFF;*/
}

li.film_text {
font:italic 0.8em arial,sans-serif;
color:#FFFFFF;
}

li.programmer {
font:bold 0.8em arial,sans-serif;
color:#000000;
margin-top:0.5em;
}

/*  LINKBAR  */
#linkbar {
width:100%;
clear:both;
background-color:#DFDFDF;/*#DFF0AA*/
}

#linkbar ul, #comsoon ul {
list-style-type:none;
margin:0;
padding:0 0 1em 0;

}

#linkbar ul li div.panel
{
width: 90%;
margin: 10px auto;
min-height:200px;
background:rgba(152, 191, 33, 0.6);/*Equals #98bf21 @60% opacity*/
border:solid 1px #98bf21;
border-radius:2px;
}

ul a.panel
{
display:inline-block;
padding:1.2em;
text-decoration: none;
color: #FFFFFF;
font:normal 0.85em arial, sans-serif;
}

#linkbar ul a.panel div.round
{
border-radius: 50%;
background-position: center;
background-size:110%;
overflow:hidden;
width: 100px;
height: 100px;
float:right;
margin:0 1.2em;
}
#linkbar ul li a.panel h3
{
margin-top: -0.1em;
color:#245313;
}

#linkbar ul a.button{
display:none;
}

#linkbar ul li.title, #comsoon ul li.title 
{
text-align:center;
padding:0.3em;
background-color: #98bf21;
font-weight:bold;
color:#FFFFFF;
}

/* tablet screens */

@media screen and (min-width: 520px) {
            
            #header {
            width:100%;
            background:url( '../image/difs_banner_logo.jpg ') no-repeat;
            background-size:100% 150px;
            border:none;
            }
            
            .page_title
            {
                display:none;
            }
            
            #main
            {
                margin-top:2em;/*height of the menu*/
            }

            
            #box
            {
            top:1em;
            }

            #linkbar
                {
                background-color:rgba(152, 191, 33, 0.8);
                }
                
                #linkbar ul 
                {
                overflow:hidden;
                padding: 0;
                }
                
                #linkbar ul li.title 
                {
                float:left;
                background-color:inherit;
                padding:0.3em 1em;
                border: none;
                }
                
                #linkbar ul a.button:link,a.button:visited {
                float:left;
                border: none;
                padding:0.3em 1em;
                display:block;
                font-weight:bold;
                color:#FFFFFF;
                background-color:inherit;
                text-align:center;
                text-decoration:none;
                text-transform:uppercase;
                }
                #linkbar ul a.button:hover,a.button:active 
                {
                background-color:#465813;
                }
                #linkbar ul div, a.panel
                {
                display: none;
                }

                #fb_badge_mobile {
                display:none;
                }
                
                #fb_badge_desktop {
                display:none;
                float:right;
                margin:10px;
                width:151px;
                height:35px;
                overflow:hidden;
                }
                
                  
}

/*desktop screens*/

@media screen and (min-width: 900px){

.cont_about
    {
    min-width:860px;
    }

.cont_index
    {
        min-width:768px;
    }


#main_left
{
max-width:600px;
height:400px;
}

#main_right
{
    background-color:inherit;
    max-width:300px;  
}

#counter 
{
float:right;
background-color:inherit;
}

div.video
{
    float:left;
    margin: 10px;
    padding: 10px;
    width:400px;
    height:250px;
        
}

div.title
{
    display:none;
}


img.img_main {
width:100%;
height:100%;
}


    img.poster_left
    {
        float:left;
        width:300px;
        margin: 10px;
        padding: 10px;
    }
    img.poster_right
    {
        float:right;
        width:300px;
        margin: 10px;
        padding: 10px;
    }
    
    div.image-container
    {
        width:95%;
        margin:0px auto;
        
    }
    img.ratings
    {
        width:33%;
        float:left;
        margin:10px auto;
    }
    
    div.form
    {
        float:left;
        margin: 10px;
        padding: 10px;
        width:600px;
        height: 450px;
    }
    
    
    /*  Coming Soon Page for desktop*/
    
    #comsoon
    {
        margin-top: 3em;
    }
    
    #comsoon ul ul.event_text
     {
        padding:0 0.5em;
     }
     
     #comsoon .image-container
     {
        float:left;
        width: 150px;
     }
    
     /*  CONTACT FORM   */
     
     .styled_button 
    {
	font-size:1.3em;
	width: 6em;
    }

   
    


}/*end of desktop styles*/