@charset"utf-8";
/* dafra */

*        {margin: 0; padding:0;}
 html    {overflow-y:scroll; height: 100% }
 ul      {list-style: square inside; }
 ol      {list-style: decimal inside;}
 a       {outline: none; text-decoration:underline;}
 a img   {border:none; }
 img     {vertical-align:middle; }


 

#container{
          
             
              width:960px; /*note was 960px*960px*/
              
              margin-right:auto;  /*note was auto*/ 
              margin-left:auto;   /*note was auto*/
              text-align:left;
              position:relative;
              padding: 5px;}
              
          
#header      {
             
              background-image:url(images/BANNER_CSS.png);
              
              width:960px;
              height:146px;
              position:center;
              
              
        }  
              
              
 #button {}
              
              
              
              
              
                
              

b          {text-align:center;font-weight:bold; color:#FF0000;}                       
p          {text-align:center;font-weight:bold; color:#000000;}

body          {
              text-align:center;
              
              background-image :url(images/Background_04.PNG);
              
              background-color: #cccccc;
              
              
               
              }  
            

               
#content     {
               float:right;    /*note was float right*/
               width:auto;   /*note was 960px*/
               padding:5px;
               font-family:arial;
               text-align:left;
               font-size:14px;
               background-color: #ffffff;
               }                         
         
  

                  
                  
                  
                  
                  
                  
                  
                  
                  
     /* BE SURE TO INCLUDE THE CSS RESET FOUND IN THE DEMO PAGE'S CSS */

/*------------------------------------*\
    NAV
\*------------------------------------*/
#nav{
    list-style:none;
    font-weight:bold;
    font-family:Arial;
                
                font-size:16px;
                padding-top:5px;
   
    margin-bottom:10px;
    float:left; /* Clear floats */
    width:100%;
    /* Bring the nav above everything else--uncomment if needed.
    position:relative;
    z-index:5;
    */
}
#nav li{
    float:left;
    margin-right:10px;
    position:relative;
}
#nav a{
    display:block;
    padding:5px;
    color:#fff;/*text colour*/
    background:#454545;/*block colour*/
    text-decoration:none;
}
#nav a:hover{
    color:#00fff;
    background:#6b0c36;
    text-decoration:underline;
}

/*--- DROPDOWN ---*/
#nav ul{
    background:#fff; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
    background:rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
    list-style:none;
    position:absolute;
    left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
}
#nav ul li{
    padding-top:2px; /* Introducing a padding between the li and the a give the illusion spaced items */
    float:none;
}
#nav ul a{
    white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}
#nav li:hover ul{ /* Display the dropdown on hover */
    left:0; /* Bring back on-screen when needed */
}
#nav li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
    background:#999999;/*drop down box colour unselected/*
    text-decoration:underline;
}
#nav li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
    text-decoration:none;
}
#nav li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
    background:#333;
}             
                  
                  
                  
                  
                  
                  
                  
                  
                  
                  
                  
                  
                  
                  
                  
                  
                  
                  
                  
                  
                  

               
               

               
               
               
               
                      

               
#widemenu ul li {
              
                float:left;
                list-style-type:none;
                padding: 5px 20px 5px 5px;
                font-family:Arial;
                font-weight:bold;
                font-size:16px;
                padding-top:5px;
                }
                
                
                

#widemenu ul li a {
                  color:#ffffff;
                  text-decoration:none; 
                  }                
#widemenu ul li a:hover {
                        color:#00FF00;
                         }
#widemenu        {
                 background-color: #282828;
                 margin-bottom:10px;
                 height:25px;}
#widemenu ul     {
                 margin:0px;
                 padding:0px;}
#widemenu  ul li:hover{
                      background-color:#F07800;
                      }
                      
                      
               
  
                
#footer        {
               
               clear:both; 
               float:right;
               width:auto;
               padding: 5px;
               background-color: #ffffff;
              
               }