/**
 * Mitchells Barbers - http://www.mitchellsbarbers.co.uk/
 * Website Designed And Built By http://www.SG4.co.uk
 * (C) 2010
 */

/**
 * Universal styles used throughout the whole site.
 * This section deals mostly with layout options.
 * Text formatting styles appear further down.
 */
body { width: 100%; min-width: 960px; height: auto; }

   .topSection { width: 100%; height: auto; background-color: #D6D7D8; }

      .header { width: 960px; height: 473px; background: url("../img/resources/header.jpg") no-repeat; position: relative; margin: 0px auto; }
      
      .header .logo { width: 467px; height: 118px; background: url("../img/resources/mitchells_male_barbers.png") no-repeat; display: block; position: absolute; left: 0px; top: 198px; }
      
      .menuContainer { width: 100%; height: 42px; background-color: #9B9C9E; }
      
         .menu { width: 960px; height: 100%; position: relative; margin: 0px auto; }
         
            .menu .left { height: 100%; width: auto; position: absolute; left: 0px; top: 0px; }
            
            .menu .right { height: 100%; width: auto; position: absolute; right: 0px; top: 0px; }
            
            .menu a { color: #ffffff; height: 28px; padding-top: 14px; width: 96px; display: block; font-family: Georgia; font-size: 14px; float: left; text-decoration: none; text-align: center; font-style: italic; }
            
            .menu a:hover, .menu .current { background-color: #58585A; }
            
   .bottomSection { width: 960px; height: auto; margin: 0px auto; }
      
      .content { margin: 28px 25px 0px 25px; }
   
      .footer { width: 910px; height: 35px; position: relative; background: url("../img/resources/footer.png") no-repeat; padding: 0px 25px 0px 25px; margin-bottom: 60px; }
      
         .footer p, .footer a { color: #cccccc; font-size: 10px; font-family: arial; text-decoration: none; }
         
         .footer a:hover { color: #ffffff; }

         .footer .left { position: absolute; left: 25px; bottom: 7px; }
         
         .footer .centre { width: 700px; margin: 0px auto 0px auto; position: relative; left: 0px; top: 5px; text-align: center;  }
         
         .footer .right { position: absolute; right: 25px; bottom: 7px; }

.clear { clear: both; }

/**
 * The styles relating to text formatting, font faces etc is collated below.
 */

.accessibility { display: none; }

h2 { font-family: Georgia; font-size: 30px; color: #9B9C9E; font-weight: 100; margin: 0px 0px 27px 0px; font-style: italic; }
h3 { font-family: arial; font-size: 12px; color: #58585A; font-weight: 900; margin-bottom: 5px; }
p, td { font-family: arial; font-size: 12px; color: #58585A; line-height: 22px; text-align: justify; }
.content p { margin-bottom: 20px }

/**
 * Home Page { #homePage } Styles
 */
#homePage { margin: 0px 0px 23px 0px; position: relative; width: 909px; }
   #homePage .left { width: 280px; float: left; margin-top: 24px; }
   
   #homePage .left a { margin-top: 25px; display: block; width: 112px; height: 20px; background-color: #9C9C9E; text-align: center; font-family: arial; color: #ffffff; text-decoration: none; font-size: 12px; padding-top: 10px; }
   
   #homePage .left a:hover { background-color: #58585A; }

   #homePage .right { position: relative; width: 603px; margin-right: 26px; height: 253px; float: right; }
      
      #homePage .right img { float: right; margin-left: 36px; }
      
/**
 * Home Page { #historyPage } Styles
 */
#historyPage { margin: 0px 0px 23px 0px; position: relative; width: 909px; }

   #historyPage .left { padding-top: 24px; float: left; width: 490px; background: url("../img/history_page_steve_mitchell.jpg") right top no-repeat; height: 449px; }
   
      #historyPage .left p { width: 270px; }
      
   #historyPage .right { float: right; width: 391px; margin-top: 24px; }

/**
 * Home Page { #locationsPage } Styles
 */
#locationsPage {  margin: 0px 0px 46px 0px; }

   #locationsPage h3 { text-transform: uppercase; }
   
   #locationsPage p { margin-bottom: 8px; line-height: 24px;  }

   #locationsPage .left { float: left; width: 615px; }
   
   #locationsPage .right { float: right; width: 200px; margin-top: 59px; }
   
   #locationsPage td { width: 71px; height: 20px; }
   
   #locationsPage .location { width: 615px; height: 116px; position: relative; margin-bottom: 28px; }
   
   #locationsPage .map { position: absolute; right: 0px; top: 0px; border-style: solid; border-width: 1px; border-color: #9B9C9E; background-color: #D4D4D4; width: 410px; height: 114px; }

/**
 * Services Pages { .servicesPage } styles
 */
 
.servicesPage { margin: 48px 0px 46px 0px; }

   .servicesPage td { width: 280px; }

   .servicesPage h2, .servicesPage h3 { display: inline;  margin: 0px 5px 0px 5px; }
   
   .servicesPage h2 {  margin: 0px 5px 0px 0px; }
   
   .servicesPage .servicesMenu, .servicesPage h3 a { color: #9B9C9E; font-family: arial; font-size: 12px; text-decoration: none; font-weight: 100; word-spacing: 3px; }

   .servicesPage .servicesMenu { margin-bottom: 24px; }
   
   .servicesPage .servicesMenu .current, .servicesPage .servicesMenu a:hover { color: #58585A; }
   
   .servicesPage table .right { width: 82px; text-align: right; }

/**
 * Gallery Page { #galleryPage }
 */
#galleryPage { margin: 42px 0px 23px 0px; position: relative; width: 909px; }

#galleryPage h2 {  margin: 0px 5px 20px 0px; }

#galleryPage #thumbnails { width: 356px; float: left; margin-top: 20px; }

#galleryPage #slideShow { width: 506px; height: 506px; float: right; overflow: hidden; position: relative; }

#galleryPage #thumbnails img { width: 70px; height: 70px;  }

#galleryPage #slideShow img {  border-style: solid; border-width: 3px; border-color: #E4E4E5;  text-align: center; display: table-cell; vertical-align: middle; margin: auto;  }

#galleryPage #slideShow { position: relative; }

#galleryPage #slideShow .portrait { position: absolute; left: 700px; }

#galleryPage #slideShow .landscape { position: absolute; margin-top: 83px !important; left: 700px; }

#galleryPage #slideShow .square { position: absolute; top: 0px; }

#galleryPage #slideShow .container { width: 500px; height: 500px; position: absolute; left: 0px; top: 0px; }

.slide_show_hidden { display: none !important; }

.current_thumb { border-top-color: #9B9C9E !important; }

.thumbnailContainer { width: 73px; height: 73px; padding-top: 3px; padding-left: 3px; position: relative; float: left; margin-right: 13px; margin-bottom: 24px; background-color: #E4E4E5; }

.thumbnailContainer:hover { background-color: #9B9C9E; }

.noBorder { border-style: none !important; }

#teamPage .left { width: 590px; }

#teamPage h3 { text-transform: uppercase; }

#teamPage p, #teamPage label, #teamPage .topSection input{ font-family: arial; font-size: 12px; color: #58585A; line-height: 22px; text-align: justify; }

#teamPage form { padding-top: 10px; padding-bottom: 45px; }

#teamPage .formTop input, textarea { width: 250px; border-style: solid; border-color: #9c9c9e; border-width: 1px; }

#teamPage .message { display: inline; position: relative; top: -2px; left: 12px; }

#teamPage textarea { height: 63px; }