/* 
=============================================================================================================================

                                      Per Angusta Gallery - Web site creation service
   
                      Main style sheet template - Created Sept 2008.    Version 1 

                                            Copyright 2007 Per Angusta Gallery
                                  Successfully tested for W3C CSS compliance - January 2008

This CSS has been set up for optimal display in 1024 x 768 pixel display screens.  

Measured across all Per Angusta Gallery designed websites, 
as at Jan 2008 59% of visitors (where the display was measurable) used 1024 x 768 screen resolution
and 69% of visitors used a 4:3 ratio display
 
=============================================================================================================================
*/

html {height: 100%; 
         max-height: 100%;
         padding: 0; 
         margin: 0; 
         border: 0; 
         background: #ffffff /* white */; 
         font-size: 100%; 
         font-family: verdana, arial, sans-serif;
         color: #336699 /* logo blue */;   
         overflow: hidden;
        }

body {height: 100%; 
         max-height: 100%; 
         overflow:hidden; 
         padding: 0; 
         margin: 0; 
         border: 0;
         background: #ffffff /* white */;
         font-family: verdana, arial, sans-serif;
         color: #336699 /* logo blue */; 
       }

/* CREATE MAIN CONTENT BOX WITH MARGINS ALL ROUND WHICH ALLOWS FOR SIDE BLOCK*/
/* There must be a bottom margin so that Opera, Netscape & Firefox have scroll
   bars.  IE has to be dealt with separately to get the scroll bar  
   Note: 10px margins to top and left*/

#content {
	overflow: auto;
	position: absolute;
	z-index: 10;
	top: 140px;
	bottom: 35px;
	left: 185px;
	right: 10px;
	color: #336699 /* logo blue */;
	background: #ffffff /* white */;
         }

/* This now creates the borders necessary for IE to have a scroll bar.
    This will only work if IE is in QUIRKS mode 
    Make sure that the border sizes match the margins set in #content and that
    border colours match the background set in #content.  Need the SOLID in before the colours*/

* html #content {height: 100%; 
                 width: 100%; 
                 top: 0; 
                 left: 0; 
                 border-top: 140px solid #ffffff /* white */; 
                 border-bottom: 35px solid #ffffff /* white */;
                 border-left: 185px solid #ffffff /* white */;
                 border-right: 10px solid #ffffff /* white */;
                }

/* NOW DEAL WITH TEXT FORMATTING WITHIN CONTENT */

#content h1{font-size: 14px;
            font-weight: bold;
            line-height: 16px;
           }

#content h2{font-size: 14px;
            font-weight: normal;
            line-height: 16px;
           }

#content h3{font-size: 16px;
            font-weight: bold;
            font-style: italic;
            line-height: 16px;
            font-family: felix titling,verdana, arial, sans-serif;
            color: #003366 /* dark blue */;
           }


#content h4{font-size: 12px;
            font-weight: normal;
            line-height: 14px;
           }


#content ul
         {font-size: 14px;
          font-weight: normal;
          line-height: 18px;
           }

#content a.hnav, a.hnav:link, a.nav:visited
           {color: #ffffff /* white */;
            text-decoration: none;
            font-size: 12px;
            font-weight: bold;
            line-height: 14px;
            background:  #336699 /* logo blue */;
            }

#content a.hnav:hover, a.nav:visited 
         {color:  #003366 /* dark blue */;
          background: #b8d0dc /* pale colour */;
         }


/* CREATE A TITLE BAR TO SIT ABOVE THE CONTENT */

#titlebar {position: absolute; 
               z-index: 20;
               top: 5px; 
               left: 5px;
               width: 100%;
               right: 0; 
               line-height: 80px;
               font-family: verdana, arial, sans-serif;
               color: #336699 /* logo blue */;
               background-color: #ffffff /* white */;
               font-size: 35px;
               margin-top: 0;
               font-weight: normal;
               text-indent: 20px;
              }

/* CREATE A SLOGAN BAR TO SIT BELOW TITLE BAR & ABOVE THE CONTENT */

#sloganbar {
	position: absolute;
	z-index: 20;
	top: 60px;
	left: 338px;
	right: 0;
	width:100%;
	line-height: 29px;
	font-family: felix titling,verdana, arial, sans-serif;
	color: #336699 /* logo blue */;
	font-size: 25px;
	background-color: #ffffff /* white */;
	text-indent: 10px;
	border: 0;
                  }

/* CREATE A BLOCK TO HOLD THE LOGO BESIDE THE TITLE BAR */

#logo {position: relative;
       z-index: 20;
       top: 5px;
       left: 600px;
       }

/* CREATE A BLOCK TO HOLD PICTURE BESIDE CONTENTS*/

#sidepic {
	position: absolute;
	z-index: 20;
	top: 127px;
	width: 170px;
	left: 8px;
	bottom: 35px;
	overflow: auto;
	font-family: verdana, arial, sans-serif;
	font-size: 10px;
          }


/* This now creates the borders necessary for IE to have a scroll bar.
    This will only work if IE is in QUIRKS mode 
    Bottom border has to be big enough to clear the footer bar*/

* html #sidepic {height: 100%;
                 top: 125px; 
                 left: 0px;
                 width: 155px; 
                 border-top: 10px solid #ffffff /* white */; 
                 border-bottom: 165px solid #ffffff /* white */;
                 border-left: 10px solid #ffffff /* white */;
                 border-right: 10px solid #ffffff /* white */;
                 overflow: auto;
                }


/* CREATE A TOP MENU, WITHOUT ANY DROP DOWNS TO SIT BELOW SLOGANBAR & ABOVE LOCATOR BAR*/

#topmenu {position: absolute;
          z-index: 20;
          top: 90px;
          left: 10px;
          width: 100%;
          background: #b8d0dc /* pale colour */;
         }


#topmenu a.nav, a.nav:link, a.nav:visited 
         {display: block; 
          width: 145px; 
          height: 20px;
          background: #b8d0dc /* pale colour */;
          border-left: 1px solid #003366 /* dark blue */;
          border-right: 1px solid #003366 /* dark blue */;
          margin-top: 0;
          text-align: center; 
          text-decoration: none; 
          font-family: verdana, arial, sans-serif; 
          font-size: 12px;
          font-weight: bold; 
          font-style: normal;
          color: #003366 /* dark blue */;
          line-height: 20px; 
          overflow: hidden;
          float: left;
         } 

#topmenu a.nav:hover, a.nav:visited  
         {color:  #ffffff /* white */;
          background: #336699 /* logo blue */;
         }
#topmenu img {
          border-top: 0;
          border-bottom: 0;
          border-left: 5px solid #b8d0dc /* pale colour */;
          border-right: 5px solid #b8d0dc /* pale colour */;
         }


/* CREATE FOOTER BAR TO GO BELOW CONTENT */

#footerbar {position: absolute; 
            z-index: 20;
            bottom: 10px; 
            left: 10px; 
            width:100%;
            line-height: 15px;
            font-size: 10px;
            font-family: verdana, arial, sans-serif;
            color: #003366 /* dark blue */;
            background: #b8d0dc /* pale colour */;
            font-weight: normal;
           }

#footerbar a.nav, a.nav:link
         {display: block; 
          width: 125px; 
          height: 15px;
          background: #b8d0dc /* pale colour */;
          border-left: 1px solid #003366 /* dark blue */;
          border-right: 1px solid #003366 /* dark blue */;
          margin-top: 0; 
          text-align: center; 
          text-decoration: none; 
          font-family: verdana, arial, sans-serif; 
          font-size: 10px;
          font-weight: bold; 
          font-style: italic;
          color: #003366 /* dark blue */; 
          line-height: 15px; 
          overflow: hidden;
          float: left;
         } 

#footerbar a.nav:hover, a.nav:visited  
         {color:  #ffffff /* white */;
          background: #336699 /* logo blue */;
         }

#footerbar img {
          border-top: 0;
          border-bottom: 0;
          border-left: 5px solid #b8d0dc /* pale colour */;
          border-right: 5px solid #b8d0dc /* pale colour */;
         }

/* SITEMAP FORMAT */

#sitemap
     {border: 2px solid #336699 /* logo blue */;
      position: relative;
      width: 100%;
      font-size: 14px;
      text-align: center;
     }

#sitemap th, tr, td
     {border: 0;
      text-align: left;
      text-indent: 3px;
     }

#sitemap th.level1, tr.level1, td.level1
     {background-color: #336699 /* logo blue */;
      color: #ffffff /* white */;
     }

#sitemap a.level1, a.level1:link, a.level1:visited
           {color: #ffffff /* white */;
            text-decoration: none;
            font-size: 14px;
            font-weight: normal;
            line-height: 16px;
           }

#sitemap a.level1:hover 
         {color:  #ffffff /* white */;
          background-color: #b8d0dc /* pale colour */;
         }

#sitemap th.level2, tr.level2, td.level2
     {background-color: #b8d0dc /* pale colour */;
      color: #336699 /* logo blue */;
     }

#sitemap a.level2, a.level2:link, a.level2:visited
           {color: #336699 /* logo blue */;
            text-decoration: none;
            font-size: 14px;
            font-weight: normal;
            line-height: 16px;
           }

#sitemap a.level2:hover 
         {color:  #336699 /* logo blue */;
          background-color: #e8f4fa /* v pale colour */;
         }

#sitemap th.level3, tr.level3, td.level3
     {background-color: #e8f4fa /* v pale colour */;
      color: #336699 /* logo blue */;
     }

#sitemap a.level3, a.level3:link, a.level3:visited
           {color: #336699 /* logo blue */;
            text-decoration: none;
            font-size: 14px;
            font-weight: normal;
            line-height: 16px;
           }

#sitemap a.level3:hover 
         {color:  #336699 /* logo blue */;
          background-color: #b8d0dc /* pale colour */;
         }