blockquote {
  background: transparent url(images/openQuote.png) left top no-repeat; margin-top: 10px;
}
blockquote div {
  padding: 0 48px;
  background: transparent url(images/closeQuote.png) right bottom no-repeat;
}
/**************
* MAIN STYLING 
**************/
* { 
  margin: 0; 
  padding: 0; 
}

a img{border: none;}

.clear{clear: both;}

.indent{margin-left: 50px;}

/**************
* HEADER
**************/
.heading{
  height: 90px; 
  background-image: url(images/top-band-gradient.gif); 
  background-repeat: repeat-x; 
  background-color: #585858;
   position: relative; z-index: 20; 
}
   
.inner-heading{
  width: 1000px; 
  margin: 0 auto; 
  height: 90px;
}

/* logo class for the homepage where the logo acts as an h1 tag */
.logo{
  width: 200px;
}

/* logo class for consequent pages where the logo is not a heading 
but is a link back to the homepage */
.logo2{
  width: 200px;  
  height: 80px; 
  padding-top: 10px; 
  background: transparent;
}

/* make the logo as a background image. For SEO purposes the text for h1
exists but is put off the page. */
.heading h1 {
   display: block;
   width: 200px;
   height: 80px;
   padding-top: 10px;
   text-indent: -9999px;
   background: transparent url(images/loudon-web-design.png) no-repeat 0 0;
}

.heading h1 a{
 display: block;
 width: 100%;
 height: 100%;
 outline: none;
}


/****************
* ALL THE SHADOWS
*****************/
.horizShadow{
  height: 20px; 
  background-image: url(images/horizShadow.png); 
  background-repeat: repeat-x; 
  position: relative; 
  z-index: 9; 
  padding: 0;
}

/* horizShadowDown refers to the homepage and horizShadowDown2 to subsequent pages */
.horizShadowDown, .horizShadowDown2, .horizShadowDown3{
  height: 20px; 
  background-image: url(images/horizShadowDown.png); 
  background-repeat: repeat-x; 
  position: relative; 
  top: -30px;
  z-index: 9; 
  height: 20px;
}

 .big-footer-horizShadow{height: 20px; 
  background-image: url(images/horizShadow.png); 
  background-repeat: repeat-x; 
  position: relative; 
  top: 5px;
  z-index: 9; 
  padding: 0;
  }

/**************
* MAIN SECTION
**************/
 .main-section{
  background-image: url(images/white-vertical.gif); 
  background-repeat: repeat-x;  
  position: relative;
  top: -20px; 
  z-index: 5;
  background-color: #b1b1b1; 
}

/* index-main-section-wrapper applies to the homepage and main-section-wrapper applies to subsequent pages */
.main-section-wrapper, .index-main-section-wrapper{
  width: 1000px; 
  margin: 0 auto; 
}
.main-section-wrapper{
  background-color: #fff; 
  border-right: solid 1px #5b5b5b; 
  border-left: solid 1px #5b5b5b;
}
.index-main-section-wrapper{height: 430px;}

.legend{
  padding: 30px 100px 30px 50px; 
  width: 500px; 
  color: #454545; 
  font-size: 1.2em; 
  height: 223px;
}

.legend p{margin-top: 10px; margin-right: 20px;}

/* index-right-top applies to the homepage and right-top applies to subsequent pages */
.right-top, .index-right-top{
  width: 400px; 
  float: right; 
  height: 283px;
  margin-right: 24px;
}      

.index-right-top{margin-top: 35px;}

.left-top{
  width: 520px; 
  color: #454545; 
  font-size: 1.2em; 
  height: 315px;
}
.left-top a, .left-top a:visited{color: #454545;}
.left-top a:hover{color: #09c;}

.left-top h1{padding: 40px 0 0 50px; font-size: 1.5em;}
.left-top p{margin: 15px 50px;}
.left-top p span{font-weight: bold; font-size: 1em;}

/* In the homepage the slideshow takes the place of left-top */
.slideshow{
  width: 550px; 
  height: 304px; 
  position: relative; 
  top: 60px; 
  right: 40px; 
  border: solid 5px #fff;
}
    
.link-box{
  width: 150px; 
  height: 120px; 
  border: solid 5px #35778a; 
  float: left; 
  margin: 25px 0 25px 40px;
}

.link-box p{
  text-align: center; 
  color: #000; 
  font-weight: bold;  
  background-color: #fff; 
  /* for IE */ 
  opacity:0.6; filter:alpha(opacity=60); 
  height: 20px; 
  margin-top: -30px; 
  font-size: 1.2em;
}

#do-i-need-a-site{margin-top: -50px;}


/*******************
* MAIN BOTTOM SECTION
********************/
.bottom-section{ 
  background-image: url(images/bottom-band-gradient.gif); 
  background-repeat: repeat-x; 
  background-color: #9e9e9e; 
  border-top: 1px solid #484848; 
  color: #fff;
  padding-top: 20px;
  margin-top: -38px;
  margin-bottom: -38px;
  }

.inner-bottom-section{
  width: 1000px; 
  margin: 0 auto;
  margin-bottom: 30px;
  font-size: 1.1em;
}
.inner-bottom-section p{margin-top: 10px;}
.inner-bottom-section p:first-letter{font-size: 1.4em;}
.inner-bottom-section-columns{width: 280px; float: left; margin: 0 20px;}
.inner-bottom-section-columns span{font-weight: bold; font-size: 1.1em;}
.inner-bottom-section-columns a, .inner-bottom-section-columns a:visited{color: #fff;}
.inner-bottom-section-columns a:hover{color: #09c}

.inner-bottom-section-left{
  float: left; 
  width: 500px; 
  margin-right: 50px; 
  font-size: 1.1em;
  margin-top: 30px;
}

.inner-bottom-section-left h2{margin-left: 50px;}

.inner-bottom-section-left td{width: 200px; height: 1.5em;}

.inner-bottom-section-left-item{
  background-color: #d8d8d8;
  color: #4e4e4e;
  border: solid 1px #000;
}
.inner-bottom-section-left-item h3{ 
  background-image: url(images/top-gradient.png);
  background-repeat: repeat-x;  
  color: #585858; 
  padding: 5px 20px;
}
.inner-bottom-section-left-item h3 span{
  float: right;
}

.inner-bottom-section-left-item p{
  padding: 20px 20px 40px;;  
}

.inner-bottom-section-left-item p img{
  padding-top: 0px; 
  padding-bottom: 0px; 
  float: left;
  margin-top: -10px;
}

.inner-bottom-section-right{
  width: 350px; 
  float: right;
  margin-top: 60px;
}

.pricing-text{
  width: 380px;
  font-size: 1.1em; 
  margin-top: 20px;
  padding: 20px 15px 30px 30px; 
  border: solid 1px #fff; 
  color: #fff;  
  position: relative; 
  right: 80px; 
  top: -50px;
  background-color: #7f7f7f;
}
.pricing-text-bold{
  font-weight: bold;
}

.price-options{border: solid 1px #e1e1e1; width: 470px; height: 200px; 
           background-color: #808080; float: left; margin: 0px; padding: 0; background-image: url(images/whiteGreyGrad2.gif); background-repeat: repeat-x; margin-bottom: 30px; }
 .price-blue-title{width: 45px; height: 200px; background-color: #516173; 
              background-image: url(images/blueGradient.gif); background-repeat: repeat-x; float: left;}
.price-options-image{float: left; width: 130px; height: 200;}
.price-options-image img{margin-top: 20px;}
.price-options-text{width: 290px; float: left; color: #5d5d5d;}
.price-options-text p{padding: 0px 20px 0 20px; font-size: 1em;}
.price-options-price{text-align: right; font-weight: bold; padding-bottom: 0;}
  
/**************
* BIG FOOTER
**************/
.big-footer{ 
  background-image: url(images/big-footer-background.gif); 
  background-repeat: repeat-x;
  background-color: #fff;  
  color: #616161;
  margin-top: -15px;
  padding-bottom: 30px;
  }
.inner-big-footer{width: 1000px; margin: 0 auto;}
.inner-big-footer-right{
  float: right; 
  margin-top: 27px; 
  color: #383838; 
  text-align: right; 
  width: 400px;
}
.inner-big-footer-right p a{color: #383838; margin-left: 20px;}
.inner-big-footer-right p a:hover{color: #f00;}

.inner-big-footer-right p{margin-bottom: 10px;}
.big-footer-item{margin: 30px; float: left;}
.big-footer-item img{border: none;}

/*********************************************
* NAVIGATION 
**********************************************/      
.navigation-bar{
  width: 500px; 
  float: right; 
  margin-top: -100px; 
  height: 50px; 
  background: transparent;
  
   
}
ul#navlist{
  padding-left: 0;
  white-space: nowrap;
  float: right;
  font-size: 1.1em;
  background: transparent;
  margin: 58px 0 0; 
}
#navlist li{
  display: inline;
  list-style-type: none;
}
#navlist a:hover{
  border-bottom: solid thick #35778a;
  position: relative; z-index: 20; 
}
#navlist a, #navlist a:visited{
  color: #fff;
  font-size: 1.1em;
  text-decoration: none;
  padding: 50px 10px 10px;
  margin: 0 0 30px 0;
}
body#index a#indexnav, body#contact a#contactnav,
body#work a#worknav, body#resources a#resourcesnav,
body#pricing a#pricingnav, body#testimonials a#testimonialsnav, 
body#resources a#resourcesnav
 {
  background-image: url(images/blueGradient.gif); 
  background-repeat: repeat-x; 
  padding-top: 50px; 
  padding-bottom: 20px; 
  background-color: #4f6778;
  height: 100px;
  position: relative; z-index: 20;
}


/**************
* CONTACT FORM
***************/
input.contact-form, select.contact-form{
  height: 1.3em; 
  font-size: 1em;
  color: #2b6fa2;
  font-weight: normal; 
  }
textarea.contact-form{
  font-size: 1em;
  color: #2b6fa2;
  font-weight: bold;
 }
.thank-you-message{
  text-align: center; 
  color: #fff; 
  font-size: 1.4em
}
.contact-main-section{
  background-image: url(images/white-vertical.gif); 
  background-repeat: repeat-x;  
  position: relative;
  top: -20px; 
  z-index: 5;
  height: 320px;
  }
.contact-right-top{width: 450px; float: right; margin-top: 0px; position: relative; z-index: 8;}
.contact-right-top img{border: solid 2px #000; position: relative; z-index: 8;}


.theForm{
width: 450px; 
float: right; font-family: tahoma, verdana; margin: 0 auto; font-size: 1em; color: #000; padding: 0; background-color: #c0c0c0; border-left: solid 2px #fff; height: 500px; } 
    .greySection{width: 850px; margin: 0 auto; margin-top: 100px; border: solid 2px #fff; background-color: #797979; height: 500px; margin-top: 150px;}
    
.boxes{border: solid 1px #e1e1e1; width: 470px; height: 230px; 
           background-color: #808080; float: left; margin-top: 0px; padding: 0; background-image: url(images/whiteGreyGrad.gif); background-repeat: repeat-x; margin-bottom: 30px; clear: both;}
        
.boxes-right{border: solid 1px #e1e1e1; width: 470px; height: 230px; 
           background-color: #808080; float: right; margin-top: 40px 0 30px 55px; padding: 0; background-image: url(images/whiteGreyGrad.gif); background-repeat: repeat-x;}
           
.boxes-blue-title{width: 45px; height: 230px; background-color: #516173; 
              background-image: url(images/blueGradient.gif); background-repeat: repeat-x; float: left; }
           
.boxes-image{float: left; width: 130px; height: 230px;}
.boxes-image img{margin-top: 20px;}
.boxes-text{width: 290px; float: left; color: #5d5d5d;}
 .boxes-text p{padding: 10px 20px; font-size: 1.1em;}
 
 /*********************
 *  FIRST WEBSITE GUIDE
 **********************/
.holder {width:290px; margin:20px; padding:0; border:1px solid #000; float:left;background-color: #fff; }
.holder h2 {text-align:left; color:  #737373; margin-top: 20px;}
.holder h3{color: #4b93b0;}
.holder p{padding: 10px;}
.holder img{float: left; margin: 0 15px 0 0}
a.hid {color:#4b93b0; text-decoration:none; font-weight: bold; outline-style:none;}
a.hid em {display:none;}
a.hid:hover {text-decoration:none;}
a.hid:active, a.hid:focus {background:#inherit;}
a.hid:active span, a.hid:focus span {display:none;}
a.hid:active em, a.hid:focus em {display:block; color:#555; width:100%; font-style:normal; cursor:default;}

.firstWebsiteLegend, .firstWebsiteLegendBold{margin: 15px 0px 15px 50px;}
.firstWebsiteLegendBold{font-weight: bold;} 
           
           
 /*********************
 * PORTFOLIO PAGE
 *********************/          
.portfolio-item{
  width: 810px; 
  height: 310px; 
  background-image: url(images/portfolio-background.png); 
  margin: 0 auto;
}
.portfolio-item-top{
  width: 790px; 
  height: 290px; 
  border: solid 5px #fff; 
  position: relative; 
  top: 10px; 
  left: 10px; 
  background-color: #e1e1e1;
}
.portfolio-item-right{
  width: 260px; 
  color: #7a7a7a; 
  float: right; 
  padding: 20px 40px; 
  height: 300px;
}
.portfolio-item-right a{text-decoration: none;}
.portfolio-item-right h2{color: #3a3a3a; border-top: solid 1px #09c; border-bottom: solid 1px #09c;}
.portfolio-item-left{
  float: left; 
  width: 440px; 
  margin: 0; 
  padding: 0; 
  border-right: solid 5px #fff;
}
.portfolio-legend{width: 800px; margin: 0 auto; padding: 40px;}
.portfolio-legend a, .portfolio-legend a:visited{color: #fff;}
.portfolio-legend a:hover{color: #09c;}

/****************************
*  TESTIMONIALS PAGE
****************************/
.testimonials{width: 800px; height: 150px; margin: 0 auto; 
           border: solid 5px #fff; 
  background-color: #e1e1e1; padding: 20px; font-size: 1.1em;}
.testimonials p{color: #616161; text-align: right; font-size: 1.2em; margin-top: 20px; }
.testimonials p a, .testimonials p a:visited{color: #09c;}
.testimonials p a:hover{color: #494949;}
  
/*******************************
* TERMS AND CONDITIONS PAGE
*******************************/
.terms{width: 1000px; margin: 0 auto; background-color: #fff; color: #818181; font-size: 1em;}
.terms h1, .terms h2{padding: 50px 50px 20px;}
.terms p{padding: 10px 50px; font-size: 1.2em;}
.termsBold{padding: 10px 50px; font-size: 1.2em; font-weight: bold; font-size: 1.3em;}

/***************************
* RESOURCES PAGES
**************************/
.resources-section-wrapper{width: 1000px; margin: 0 auto;}
.resources-intro, .webdesign-resources-item{
  width: 800px; 
  margin: 0 auto;
  margin-top: 30px; 
  border: solid 5px #959595; 
  background-color: #fff; 
  padding: 20px; 
  font-size: 1.1em;  
  }
.webdesign-resources-item{ 
  height: 150px;
  }
.webdesign-resources-item a, .webdesign-resources-item a:visited{
  color: #4b4b4b; font-weight: bold; 
  }
.webdesign-resources-item a:hover{color: #39c; font-weight: bold;}
.webdesign-resources-item-left{
  width: 250px; 
  float: left;
  }
.webdesign-resources-item-right{
  width: 500px; 
  float: right;
  }
.resources{width: 650px; margin: 0 auto;}
.resources a, .resources a:visited{text-decoration: none;}
.resources a:hover{/* for IE */ 
    opacity:0.7;
    filter:alpha(opacity=70);}