body {background-image: url("images/pebbledash.jpg");}

/*The wrapper wraps every page and has the white render background*/
#wrapper {font-family: Verdana, Arial, sans-serif;
          width: 960px;
          height: 690px;
          margin: auto;
          background-image: url("images/render.jpg");
          /*border: 1px solid #f00; */
          /*The three following lines are for the asymmetric border shape*/
          border-radius: 1em 4em 1em 4em / 2em 1em 2em 1em;
          -moz-border-radius: 1em 4em 1em 4em / 2em 1em 2em 1em;
          -webkit-border-radius: 1em 4em 1em 4em / 2em 1em 2em 1em;            
}

header {padding: 17px;
        /*border: 1px solid #f00; */
        height: 120px;
        text-align: right;     
}

/*This is the e-mail link in the header on each page*/
header>a {text-align: right;
          text-decoration: none;
          color: #000;
          font-size: 18px;                  
}

/*This is the e-mail link in the header on each page*/
header>a:hover {color: #0039bf;
                border-bottom: none;
}

/*This controls the size and position of the telephone number in the box on the contact page*/  
#telephone_header {font-size: 24px; 
                   margin:  0px;
                   padding: 0px;  
}

/*This is the telephone number link on the contact page*/
a.telephone_header {color: #000;
                    text-decoration: none;
}

/*This removes the wide grey line (inherited from navigation links) below the telephone number when hovering*/
a.telephone_header:hover {border-bottom: none;
                          color: #0039bf;  
}

#logo {float: left;
       width: 625px;    
}

/*The only h1 is 'Argyll Plastering & Roughcasting', on each page*/
h1 {float: left;
    margin-top: 0px;
    margin-bottom: 0px;
    font-size: 33.75px;
    color: #2c191a;
}

/*The only h2 headings are the services listed on the services page*/
h2 {margin-bottom: 0px;
    color: #991414;
    font-size: 18px;   
}

/*The h3 headings are the 'Need a plasterer?', 'Inside work' and 'Outside work'*/
h3 {margin-top: 0px;}


/*This is for the top navigation bar*/
ul {list-style-type: none;
    margin: 0px;
    padding: 0;
    margin-left: 380px; 
    overflow: auto;
    margin-right: 0px; 
    /*border: 1px solid #f00; */
}

/*This is for the headings on the top navigation bar*/
li {float: left;
    padding: 12px;  
}

/*This is to format the link text for each heading on both navigation bars*/
li a {
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    color: #000;
    /* border: 1px solid #f00;*/ 
}

/*This formats the link hover effect on both navigation bars*/
a:hover {border-bottom: 1px solid #808080;
         border-bottom-width: thick;
}

/*This ensures that there is a green line under the current page on each navigation bar*/
a.one {
    border-bottom: 1px solid #0abf00;
    border-bottom-width: thick;
}

/*The services divs containing the lists of inside and outside services (and the photos) live inside the content3 div on the services page*/
#services {
    float:left;
    width: 310px;
    height: 395px;
    /*border:  1px solid #f00; */
    padding-left: 10px;
    margin-left: 10px;
}

#services.image {width: 235px;
                 padding-top: 20px;            
}

#services.image img {padding-bottom: 20px;}

#services p {margin-top: 5px;
             padding-left: 30px;          
}

/*This is the left-hand column on the homepage only*/
#column1 {
    float: left;
    width: 432px;
    height: 326px;
    border: 1px solid #fff;
    margin-left: 17px;
    background-color: #fff;
    /*The three following lines are for the asymmetric border shape*/
    border-radius: 1em 4em 1em 4em / 2em 1em 2em 1em;
    -moz-border-radius: 1em 4em 1em 4em / 2em 1em 2em 1em;
    -webkit-border-radius: 1em 4em 1em 4em / 2em 1em 2em 1em;
    padding: 10px;
    padding-top: 10px;
    /*The three following lines are for the box shadow*/    
    -moz-box-shadow: 5px 5px 5px #777777;
    -webkit-box-shadow: 5px 5px 5px #777777;
    box-shadow: 5px 5px 5px #777777;
}

#column1 p {font-size: 16px;
            margin-left: 5px;
}

#column1 h3 {margin-top: 10px;
             margin-left: 5px;
}

/*This is the size and position of Neill's photo on the homepage*/
img.NeillPhoto {width: 80px; 
                float: left; 
                padding-right: 10px;
                padding-left: 5px;
}

/*This is the left-hand column on the contact page*/
#column3 {
    float: left;
    width: 432px;
    height: 370px;
    border: 1px solid #fff;
    margin-left: 17px;
    margin-right: 0px;
    background-color: #fff;
    /*The three following lines are for the asymmetric border shape*/
    border-radius: 1em 4em 1em 4em / 2em 1em 2em 1em;
    -moz-border-radius: 1em 4em 1em 4em / 2em 1em 2em 1em;
    -webkit-border-radius: 1em 4em 1em 4em / 2em 1em 2em 1em;
    padding: 10px;
    text-indent: 36px;
    /*The three following lines are for the box shadow*/    
    -moz-box-shadow: 5px 5px 5px #777777;
    -webkit-box-shadow: 5px 5px 5px #777777;
    box-shadow: 5px 5px 5px #777777;
    overflow: hidden;
}

/*This controls the text in the box on the contact page*/
#contact_text {font-size: 19px;
               text-align: left;
               padding-left: 14px;
               padding-right: 10px;
               text-indent: 0px;
}
 
/*This centres the 'Chat on WhatsApp' button on the contact page*/
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 45%;
  margin-bottom: 28px;
}

                  
/*This controls the size and position of the e-mail link in the box on the contact page*/ 
#email {font-size: 22px;
        padding-left: 0px;
        padding-right: 0px;
        text-indent: 0px;  
        margin-bottom: 30px;
        text-align: center;             
}

/*This is the e-mail link in the box on the contact page*/   
a.contact {color: #0039bf;
           text-decoration: none;
} 

/*This formats the link hover effect on the e-mail link in the box on the contact page */  
a.contact:hover{border-bottom: none;
                color: #0abf00;            
}

/*This controls the size and position of the telephone number in the box on the contact page*/  
#telephone {font-size: 22px; 
            padding-left: 0px;
            padding-right: 0px;
            text-indent: 0px;  
            margin-bottom: 0px;
            text-align: center;
}

/*This is the telephone number link on the contact page*/
a.telephone {color: #0039bf;
            text-decoration: none;
}

/*This removes the wide grey line (inherited from navigation links) below the telephone number when hovering*/
a.telephone:hover {border-bottom: none;
                   color:  #0abf00;  
}

/*column2 contains the slider on the homepage and the google map on the contact page*/         
#column2 {float: left;
          width: 452px;
          height: 339px;
          /*border: 1px solid #f00;*/ 
          margin-left: 17px;      
}

/*This defines the outline & borders etc. for the photo gallery*/
#gallery {width: 918px;
          margin: auto;
          overflow: auto;
          margin-top: 10px;
          height: 400px;
          /*border: 1px solid #f00;*/
          /*The three following lines are for the asymmetric border shape*/
          border-radius: 1em 4em 1em 4em / 2em 1em 2em 1em;
          -moz-border-radius: 1em 4em 1em 4em / 2em 1em 2em 1em;
          -webkit-border-radius: 1em 4em 1em 4em / 2em 1em 2em 1em;
          /*The three following lines are for the box shadow*/       
          -moz-box-shadow: 5px 5px 5px #777777;
          -webkit-box-shadow: 5px 5px 5px #777777;
          box-shadow:5px 5px 5px #777777;            
}

/*This makes the cursor a magnifying glass when you hover on the thumbnails on the services page and the gallery page*/
a.thumbnail{cursor: -moz-zoom-in;         
}

/*Needed to remove the bottom border default inherited from the navigation links*/
a.thumbnail:hover{border-bottom: none;}

/*This is the start of the slider CSS*/
.slider {
    max-width: 960px;
    margin: 0px auto 30px auto;
}

.slide-viewer {
    position: relative;
    overflow: hidden;
    height: 339px;
}

.slide-group {
    width: 100%;
    height: 100%;
    position: relative;
}

.slide {
    width: 100%;
    height: 100%;
    display: none;
    position: absolute;
}

.slide:first-child {
    display: block;
}

.slide-buttons {
  text-align: center;
}

.slide-btn {
  border: none;
  background: none;
  color: #000;
  font-size: 200%;
  line-height: 0.5em;}

.slide-btn.active, .slide-btn:hover {
  color: #0abf00;
  cursor: pointer;}

.slide-btn:hover {color: #808080;
                  cursor: pointer;
}
/*This is the end of the slider CSS*/

/*This defines outline etc of the content div on the homepage and the contact page*/
#content {overflow: auto;
          width: 100%;
          /* border: 1px solid #f00;*/
          height: 400px;
          margin: 0px;
          margin-top: 10px;       
}

/*content2 contains the testimonials*/
#content2 {overflow: auto;
                     background-color: #fff;
                      width: 923px;
                      /*The three following lines are for the asymmetric border shape*/
                     border-radius: 1em 4em 1em 4em / 2em 1em 2em 1em;
                     -moz-border-radius: 1em 4em 1em 4em / 2em 1em 2em 1em;
                     -webkit-border-radius: 1em 4em 1em 4em / 2em 1em 2em 1em;
                     height: 400px;
                     margin: auto;
                     margin-top: 10px;
                     /*The three following lines are for the box shadow*/       
                     -moz-box-shadow: 5px 5px 5px #777777;
                     -webkit-box-shadow: 5px 5px 5px #777777;
                     box-shadow:5px 5px 5px #777777; 
}

#content2 p {margin: 16px;}

/*This controls the indent and bullet style of any list of tasks in the testimonials page*/        
#tasks {list-style-type: disc;
        margin-left: 40px;
        float: none;
        padding:  0px;       
}

/*This controls the look of the author's name in each testimonial*/
.author {font-weight: bold;
         text-align: right;
         font-style: italic;
         font-size: smaller;
}


/*This controls the position and text wrapping for images in the testimonials*/
#content2 img.minilibrary {float: left;
                           vertical-align: text-top;
                           margin-right: 14px;
}

#content2 img.tinchurch {float: left;
                         vertical-align: text-top;
                         margin-right: 14px;
}

#content2 img.inshaig {float: right;
              vertical-align: text-top;
              margin-left: 14px;
              margin-right: 50px;
}
/*end of testimonial photo css*/




/*content3 contains the services*/
#content3 {overflow: hidden;
                     background-color: #fff;
                     width: 922px;
                     /*The three following lines are for the asymmetric border shape*/
                     border-radius: 1em 4em 1em 4em / 2em 1em 2em 1em;
                     -moz-border-radius: 1em 4em 1em 4em / 2em 1em 2em 1em;
                     -webkit-border-radius: 1em 4em 1em 4em / 2em 1em 2em 1em;
                     height: 400px;
                     margin: auto;
                     margin-top: 10px;
                     /*The three following lines are for the box shadow*/       
                     -moz-box-shadow: 5px 5px 5px #777777;
                     -webkit-box-shadow: 5px 5px 5px #777777;
                     box-shadow: 5px 5px 5px #777777;   
}

/*This controls the message at the foot of the homepage*/
#slogan {float: left;
         /*border: 1px solid #f00;*/
         width: fill-available;
         height: 50px;
         overflow: hidden;
         margin-left: 17px;   
}

#slogan p {font-weight:bold;
           text-transform: uppercase;
           font-family: Verdana;
           color: #2c191a;
           font-size: 20px;
           text-indent: 12px;
           text-shadow: 1px 1px 0px #fff, 1.5px 1.5px 0px #2c191a;
           margin-top: 22px;
}

/*This is the general footer CSS*/
#footer {margin-top: 10px;
       /*border: 1px solid #f00;*/
        height: 50px;              
}

/*This controls the size, position etc. of the navigation bar in the footer*/
#footer ul {list-style-type: none;
    margin: 0px;
    margin-top: 24px;
    padding: 0;  
    margin-left:  10px; 
    margin-right: 500px; 
    overflow: auto;
    font-size: 12px;
    /*border: 1px solid #f00;*/
}

/*This controls the distance between each heading in the footer navigation bar*/
#footer li {/*border: 1px solid #f00;*/
            padding-right: 0px;
}


/*Facebook link css*/
.facebook {float: right;
           margin-top: 0px;
           margin-right: 20px;           
}

/*Needed to remove the bottom border default inherited from the navigation links*/
.facebook:hover{border-bottom: none;}

/*Position of Facebook icon*/
#social {float: right;
         width:6%;  
}