﻿body
{
    background-color: black;
    color: White;
    /*font-family:Tw Cen MT;
    text-align: center; */
} 

#page_container
{
    
    position: relative; /* Could have left this as the default static, but I need to position 
                          elements within this div, relative to it's centered position */
    width: 900px;
    height: 600px;
    margin-left: auto; 
    margin-right: auto;
    margin-top: 30px;
    
    border: solid 2px #EC008C;
    border-radius: 10px;  /* not supported is older browsers eg: IE8. */
}


#page_logo
{
   position: absolute;
   left: 30px;
   top: -40px;
}

#hoot
{   
    /* the container div "page_container" must be relative for this bottom right 
        positioning to work */
    position:absolute;
    bottom: 0px;
    right: 0px;
   
    border: solid 1px black;
    border-radius: 10px;   
}

#menu 
{
    
    text-align: left; 
    position: relative; 
  
    top: 80px;
    left: 10px;
   
   color: White;
    
    width: 120px;
    height: 400px;
    border-right: solid 1px white;
    float:left;
}

#menu ul
{
       list-style: none;
       margin: 0;
       padding: 0;
}

#menu li
{
    margin: 0;
    padding: 0;   
}

#menu li a
{
    font-family: Tw Cen MT;
    font-size: 24px;
    color: White;
    font-variant:small-caps;
    text-decoration: none;
    
}

#menu a:link
{
    COLOR: White;        
}

#menu a:visited 
{
    color: White;
}

a:visited
{
    color: White;
}


#menu a:hover 
{
    color: White;
}

#menu a:hover
{ 
    background-color: #EC008C;
    font-weight: bold;
}

#menu a:active 
{
    color: #EC008C;
}

#content
{
    position: absolute;
    top: 80px; /* same top as the menu */
    left: 160px; /* menu ends at 130px, so adding 30px to make 160px */  
    width: 700px;
    height: 400px; /* same height as the menu */
    text-align: left; 
    
    /* border: solid 1px red; */
    
    color: White;
    font-family:Tw Cen MT;
    font-size:16px;
    
}

#content h1
{
  
    color: #EC008C;
    font-size:24px;
    
}
#topleft
{
    top: 20px;
    left: 20px;   
}

#topright
{
    top: 20px;
    left: 600px;   
}



/**** Welcome page style ***************************************/
#intro_cont
{
    position: absolute;
    top: 120px;
    left: 20px;
}

.welcomeimages
{
    display: inline-block;
    margin-left: 15px;
    width: 150px;
    height: 340px;    
}


/**** Gallery page style ***************************************/

#thumbnails
/* thumbnail container div */
{ 
    position: absolute;
    width: 380px;
    height: 400px;
    top: 120px;
    margin-left: 155px;
 
    text-align:left;    
}


#thumbnails ul
{
    list-style: none;
    padding: 0;
    margin: 0;
}

 #thumbnails li
{   
    display: inline;
    position: relative;   
}

#imageframe #imagecontainer
{
    position: absolute;
    width: 354px;
    height: 354px;
    top: 70px;
    margin-left: 510px;
 
    text-align:left;    
       
    border: solid 5px #EC008C; /*cakeolicious pink*/
    border-radius: 10px;
}



#thumbnails img
/* all thumbnail images within the id=#tncont div */
{
 border: solid 2px black;
 border-radius: 5px;
}


#largeimg
/* image id largeimg is added via script */
{
    position: absolute;
    top: 0;
    left: 0; 
   
    border: solid 2px black;
    border-radius: 5px;
    
}

 
 
 #categories
{
    position: absolute;
    top: 80px;
    left: 0px; 
    background-color: Black;
    color: White;
    font-family:Tw Cen MT;
    font-size:large;
    border: solid 1px #EC008C; /*cakeolicious pink*/
    margin-left: 155px;
}

#enquiry /*enquiry button - should create a class for all buttons. */
{
    position: absolute;
    bottom: 100px;
    right: 160px;
    
    width: 200px;
    height: 30px;
    background-color: #111111;
    color: White;
    font-family:Tw Cen MT;
    font-size:20px;
    border: solid 2px #EC008C;
    border-radius: 5px; 
    
    text-decoration: none;
    text-align: center;    
}  


.thumb
{
    display: none; /* default display for the gallery thumbnails */
}

#signature
{
    font-family: Freestyle Script;
    color: #EC008C;
    font-size: 34px;
}

table
{
    width: 700px;
}

td
{
 text-align: left;   
}

.priceimage img
{      
    border: solid 2px black;
    border-radius: 10px;
    text-align: left;
    direction:ltr;
    display:inline-block;
   float: left;
   position: relative; 
}



.pricedetails
{
    width: 300px;
}

#flavourimg
{
   
     
    border-radius: 10px;
    
    
}

.fb-like-box
{
    position: absolute;
    left: 10px;
    top: 360px;
}
