/*
CSS for Mesman Motor site
*/
body {
  font-family: Verdana, Helvetica, Arial, sans-serif;
  background-color: #e2edff;
  line-height: 125%;
  padding: 0;
  margin: 0;
}

h1 {
  font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
  /*font-size: 4em;*/
  font-size: 75px;
  background-color: navy;
 /* padding-top: .4em;*/
  padding-top: 25px;
  padding-bottom: 33px;
  padding-left: 6px;
  margin: 0;
 /* background: navy url(pictures/gazelle.gif) repeat-y right;*/
}

h2 {
  color: black;
  font-size: 35px;
  font-weight: normal;
  padding-top: 15px;
}

h1 {
  font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
  background-color: navy;
  color: white;
}

li {
  font-size: small;
}

p {
  font-size: medium;
  color: black;
}

#tagline p {
  font-style: italic;
  font-family: Georgia, Times, serif;
  background-color: #bed8f3;
  border-top: 3px solid #7da5d8;
  border-bottom: 3px solid #7da5d8;
  padding-top: .2em;
  padding-bottom: .2em;
  padding-left: .8em;
  margin: 0;
}

#navigation {
   /*background-color: #c0c0c0;
   border-top: 3px solid #c0c0c0;
   border-bottom: 3px solid #c0c0c0;*/
 /*  padding-top: .2em;
   padding-bottom: .2em;*/
   padding-top: 10px;
   padding-bottom: 10px;

  /* background-image: url(pictures/metallicgray.gif);
   background-repeat: repeat-x;*/
}

.discounttext {
   font-family: times, Times New Roman, times-roman,serif;
   font-size: 20px;
   line-height: 20px;
   text-transform: uppercase;
   color: #444;
   text-align: center;
}

.discounttext1 {
   font-family: times, Times New Roman, times-roman,serif;
   font-size: 20px;
   line-height: 20px;
   text-transform: uppercase;
   color: #444;
}

.discounttext2 {
   font-family: times, Times New Roman, times-roman,serif;
   font-size: 20px;
   line-height: 30px;
   /*text-transform: uppercase;*/
   color: #000000;
}


.discounthead3 {
   font-family: times, Times New Roman, times-roman,serif;
   font-size: 25px;
   line-height: 10px;
   letter-spacing: -1px;
   color: #444;
   text-align: center;
}

.discounthead2 {
   font-family: times, Times New Roman, times-roman,serif;
   font-size: 25px;
   line-height: 10px;
   letter-spacing: -1px;
   color: #444;
   text-align: center;
}

.discounthead {
   font-family: times, Times New Roman, times-roman,serif;
   font-size: 25px;
   line-height: 10px;
   letter-spacing: -1px;
   color: #444;
   text-align: center;
}

.discountdetail {
   font-family: times, Times New Roman, times-roman,serif;
   font-size: 80%;
   line-height: 1.4em;
   letter-spacing: -1px;color: #444;
   /*width: 60%;*/
   text-align: center;
}

.discountpw {
   font-family: times, Times New Roman, times-roman,serif;
   font-size: 20px;
   line-height: 20px;
   text-transform: uppercase;
   color: #444;
   text-align: right;
   padding-right: 20px;
}

.header2 {
  text-align: center;
  padding-left: 20px;
}

em {
   font-weight: bold;
}


#header {
 border-top: 3px solid navy;
}


a {
  font-weight: bold;
}

a:link {
  color: ffffff;
}


.fun {
  width: 50%
}

blockquote.fun {
  font-style: italic;
}

/*
This section deals with the images on the screen.
It uses absolute positioning- fixed x and y coordinates measred
from the top-left corner of the browser's content display.
*/
.garage {
  float: center;
  margin: 10px;
  text-align: center;
  padding-left: 140px;
}

.margin {
  margin: 10px;
}

.feature {
  float: right;
  margin: 10px;
  padding-left: 1000px;
}

.shop {
  float: left;
  margin: 10px;
  padding-top: 4em;
  padding-left: 20px
}

/*
This section deals with the position of items on the screen.
It uses absolute positioning - fixed x and y coordinates measured
from the top-left corner of the browser's content display.
*/

#navigation, #bodycontent, #header, #organized, #logo, #map, #contact, #address, #discountcoupon, #discountps, #discounthonor, #discount, #space, #pictures, #servicelist, #intro, #background, #direction1, #direction2, #sitebranding, #tagline {
 position: absolute;
}


#direction1 {
   top: 25em;
   left: 120px;
   width: 250pt;
}


#direction2 {
   top: 35em;
   left: 120px;
   width: 250pt;
}

#servicelist {
   top: 10em;
   left: 300px;
   border-top: 3px solid #000000;
   border-bottom: 3px solid #000000;
   border-left: 3px solid #000000;
   border-right: 3px solid #000000;
   padding-right: .8em;
   padding-left: .8em;
   background-color: #ffffff;
   width: 650pt;

}

#discount {
   top: 10em;
   left: 300px;
   border-top: 3px solid #000000;
   border-bottom: 3px solid #000000;
   border-left: 3px solid #000000;
   border-right: 3px solid #000000;
   padding-right: .8em;
   padding-left: .8em;
   padding-top: 10px;
   padding-bottom: 15px;
   background-color: #ffffff;
   width: 650pt;
   height: 40px;
}

#space {
   top:85em;
   background-color: #e2edff;
   left: 200px;
}

#discounthonor {
   top: 63em;
   left: 300px;
   border-top: 3px solid #000000;
   border-bottom: 3px solid #000000;
   border-left: 3px solid #000000;
   border-right: 3px solid #000000;
   padding-right: .8em;
   padding-left: .8em;
   background-color: #ffffff;
   width: 650pt;
}

#discountps {
   top: 37em;
   left: 300px;
   border-top: 3px solid #000000;
   border-bottom: 3px solid #000000;
   border-left: 3px solid #000000;
   border-right: 3px solid #000000;
   padding-right: .8em;
   padding-left: .8em;
   background-color: #ffffff;
   width: 650pt;
}

#discountcoupon {
   top: 15em;
   left: 300px;
   border-top: 3px solid #000000;
   border-bottom: 3px solid #000000;
   border-left: 3px solid #000000;
   border-right: 3px solid #000000;
   padding-right: .8em;
   padding-left: .8em;
   background-color: #ffffff;
   width: 650pt;
}

#navigation, #bodycontent {
 /* top: 6.5em;*/
  top: 108px;
}

#map {
   top: 11em;
   left: 500px;
}

#address {
   top: 13em;
   left: 120px;
}

#navigation {
   width: 800pt;
   height: 35px;
}

#bodycontent {
  left: 200px;
}

#pictures {
  top: 200px;
  
}

#background {
     top: 35em;
     width: 580pt;
     padding-left: 600px;
}

#intro {
     top: 350px;
     /*width: 60%;*/
     width: 600pt;
     padding-left: 40px;
}

#organized {
  left: 450px;
  top: 15px;
}

#header {
  width: 1068pt;
}

#sitebranding {
     height: 80px;
     width: 1068pt;
}

#tagline {
     top: 72px;
     width: 1068pt;
}

#contact {
     top: 150pt;
     left: 350px;
     width: 800pt;
}

#logo {
 /*position: absolute;*/
 background-color: navy;
 background-repeat: no-repeat;
 background-position: top right;
}



/* each button text is placed using an unordered list, so the styles are applied to li attributes */
/* this positions the menu tight against the corner of the page */
#cssbuttons ul {
margin: 0 ;
padding: 0 ;
}


/* this formats the text and the spacing between the buttons Ð adjust margin to increase spacing */
#cssbuttons ul li {
font-size: large;
font-family: Arial, Helvetica, sans-serif ;
margin: 0 ;
display: inline ;
text-align: center ;
}


/* this defines the button size and color, border color, and padding changes the size */
#cssbuttons li a {
padding: 10px ;
text-decoration: none ;
/*color: #1523a6 ;*/
color: #000000;
background-color: #c0c0c0 ;
border: 1px outset #000000 ;
}


/* this defines the color of the button background and text when the mouse hovers over it */
#cssbuttons li a:hover {
color: #ffffff ;
background-color: #504a4b ;
}