/*
FILE: CelticElectricStyles.css
DESCRIPTION: Style sheet document for CelticElectric.biz
HISTORY:
May 19, 2009 - Creation date
June 9, 2009 - Added CSS enlargement of images
June 12, 2009 - 
    Added:
        Background
        Center White Space
        Menu as list with rollovers

    Changed name to Styles.css.
    Begin to remove outdated code. 

June 15, 2009
    Added:
        Project Images for hover (Removes Javascript)


KNOWN ISSUES and BUGS:
Illegal reuse of ID's. 
*/

body {
	font-family: Arial, Helvetica, sans-serif;
	background-image: url('backgrounds/celt05.jpg'); 
	width: 93%;
	height: 93%; 
}

/*
a.nodec {
	 text-decoration: none;
}

div {
	position: absolute;    
}
*/ 

.medium {
	border-width: medium
}

.solid {
	border-style: solid;

}

/*
div:hover {
	background-color:black;
	color: #33CC33;
}
*/ 

/*
a:hover {
	color: white; 
	background-color:black;
}
*/ 
/* div classes */ 

/* 
Enlarge images on mouse over using only CSS.
The outer div id is #enlargeImg

Not sure we need z-index
Size and coord come from sample web site
*/

/*
 *
 *  Project Page Image Hover
 *
*/

.projectPictureContainer /* V3.0 - empty picture container*/
{
    display: block;
    position: absolute; 
    top: 225px; left: 450px; width: 350px; height: 290; 
    padding: 5px; margin: 10px; z-index: 100;
    color: Black; /* background: #FFFFCC; */
    font: 18px Times New Roman, sans-serif; text-align: left;
   
    border:10px solid #ccc;
}

#prjAdvVetCare {position:absolute; top:235px; left:20px; width:250px; background-color:#fff; z-index:100;}
#prjAdvVetCare a.p1 {display:block; width:250px; height:10px; text-decoration:none; background:#fff; top:0; left:0; border:0;} 
#prjAdvVetCare a.p1:visited {display:block; width:250px; height:10px; text-decoration:none; background:#fff; top:0; left:0; border:0;}
#prjAdvVetCare a img {border:0; width:75px; height:75px;} /* KDG: Added width and height here for thumbnail display. */
#prjAdvVetCare a.p1:hover {text-decoration:none; background-color:White; color:#000;}
#prjAdvVetCare a .large {display:block; position:absolute; width:0; height:0; border:0; top:0; left:0;}
#prjAdvVetCare a.p1:hover .large {display:block; position:absolute; top:0px; left:440px; width:360px; height:300px; border:10px solid #ccc;}

#prjCentennialInn {position:absolute; top:255px; left:20px; width:250px; background-color:#fff; z-index:100;}
#prjCentennialInn a.p1 {display:block; width:250px; height:10px; text-decoration:none; background:#fff; top:0; left:0; border:0;} 
#prjCentennialInn a.p1:visited {display:block; width:250px; height:10px; text-decoration:none; background:#fff; top:0; left:0; border:0;}
#prjCentennialInn a img {border:0; width:75px; height:75px;} /* KDG: Added width and height here for thumbnail display. */
#prjCentennialInn a.p1:hover {text-decoration:none; background-color:White; color:#000;}
#prjCentennialInn a .large {display:block; position:absolute; width:0; height:0; border:0; top:0; left:0;}
#prjCentennialInn a.p1:hover .large {display:block; position:absolute; top:-20px; left:440px; width:360px; height:300px; border:10px solid #ccc;}

#prjBarkingDog {position:absolute; top:275px; left:20px; width:250px; background-color:#fff; z-index:100;}
#prjBarkingDog a.p1 {display:block; width:250px; height:10px; text-decoration:none; background:#fff; top:0; left:0; border:0;} 
#prjBarkingDog a.p1:visited {display:block; width:250px; height:10px; text-decoration:none; background:#fff; top:0; left:0; border:0;}
#prjBarkingDog a img {border:0; width:75px; height:75px;} /* KDG: Added width and height here for thumbnail display. */
#prjBarkingDog a.p1:hover {text-decoration:none; background-color:White; color:#000;}
#prjBarkingDog a .large {display:block; position:absolute; width:0; height:0; border:0; top:0; left:0;}
#prjBarkingDog a.p1:hover .large {display:block; position:absolute; top:-40px; left:440px; width:360px; height:300px; border:10px solid #ccc;}

#prjCorksAtTheBVI {position:absolute; top:295px; left:20px; width:250px; background-color:#fff; z-index:100;}
#prjCorksAtTheBVI a.p1 {display:block; width:250px; height:10px; text-decoration:none; background:#fff; top:0; left:0; border:0;} 
#prjCorksAtTheBVI a.p1:visited {display:block; width:250px; height:10px; text-decoration:none; background:#fff; top:0; left:0; border:0;}
#prjCorksAtTheBVI a img {border:0; width:75px; height:75px;} /* KDG: Added width and height here for thumbnail display. */
#prjCorksAtTheBVI a.p1:hover {text-decoration:none; background-color:White; color:#000;}
#prjCorksAtTheBVI a .large {display:block; position:absolute; width:0; height:0; border:0; top:0; left:0;}
#prjCorksAtTheBVI a.p1:hover .large {display:block; position:absolute; top:-60px; left:440px; width:360px; height:300px; border:10px solid #ccc;}

#prjDrLauriRosato {position:absolute; top:315px; left:20px; width:250px; background-color:#fff; z-index:100;}
#prjDrLauriRosato a.p1 {display:block; width:250px; height:10px; text-decoration:none; background:#fff; top:0; left:0; border:0;} 
#prjDrLauriRosato a.p1:visited {display:block; width:250px; height:10px; text-decoration:none; background:#fff; top:0; left:0; border:0;}
#prjDrLauriRosato a img {border:0; width:75px; height:75px;} /* KDG: Added width and height here for thumbnail display. */
#prjDrLauriRosato a.p1:hover {text-decoration:none; background-color:White; color:#000;}
#prjDrLauriRosato a .large {display:block; position:absolute; width:0; height:0; border:0; top:0; left:0;}
#prjDrLauriRosato a.p1:hover .large {display:block; position:absolute; top:-80px; left:440px; width:360px; height:300px; border:10px solid #ccc;}

#prjDrLee {position:absolute; top:335px; left:20px; width:250px; background-color:#fff; z-index:100;}
#prjDrLee a.p1 {display:block; width:250px; height:10px; text-decoration:none; background:#fff; top:0; left:0; border:0;} 
#prjDrLee a.p1:visited {display:block; width:250px; height:10px; text-decoration:none; background:#fff; top:0; left:0; border:0;}
#prjDrLee a img {border:0; width:75px; height:75px;} /* KDG: Added width and height here for thumbnail display. */
#prjDrLee a.p1:hover {text-decoration:none; background-color:White; color:#000;}
#prjDrLee a .large {display:block; position:absolute; width:0; height:0; border:0; top:0; left:0;}
#prjDrLee a.p1:hover .large {display:block; position:absolute; top:-100px; left:440px; width:360px; height:300px; border:10px solid #ccc;}

#prjGiorgios {position:absolute; top:355px; left:20px; width:250px; background-color:#fff; z-index:100;}
#prjGiorgios a.p1 {display:block; width:250px; height:10px; text-decoration:none; background:#fff; top:0; left:0; border:0;} 
#prjGiorgios a.p1:visited {display:block; width:250px; height:10px; text-decoration:none; background:#fff; top:0; left:0; border:0;}
#prjGiorgios a img {border:0; width:75px; height:75px;} /* KDG: Added width and height here for thumbnail display. */
#prjGiorgios a.p1:hover {text-decoration:none; background-color:White; color:#000;}
#prjGiorgios a .large {display:block; position:absolute; width:0; height:0; border:0; top:0; left:0;}
#prjGiorgios a.p1:hover .large {display:block; position:absolute; top:-120px; left:440px; width:360px; height:300px; border:10px solid #ccc;}

#prjKlauberResidence {position:absolute; top:375px; left:20px; width:250px; background-color:#fff; z-index:100;}
#prjKlauberResidence a.p1 {display:block; width:250px; height:10px; text-decoration:none; background:#fff; top:0; left:0; border:0;} 
#prjKlauberResidence a.p1:visited {display:block; width:250px; height:10px; text-decoration:none; background:#fff; top:0; left:0; border:0;}
#prjKlauberResidence a img {border:0; width:75px; height:75px;} /* KDG: Added width and height here for thumbnail display. */
#prjKlauberResidence a.p1:hover {text-decoration:none; background-color:White; color:#000;}
#prjKlauberResidence a .large {display:block; position:absolute; width:0; height:0; border:0; top:0; left:0;}
#prjKlauberResidence a.p1:hover .large {display:block; position:absolute; top:-140px; left:440px; width:360px; height:300px; border:10px solid #ccc;}

#prjLoefflerResidence {position:absolute; top:395px; left:20px; width:250px; background-color:#fff; z-index:100;}
#prjLoefflerResidence a.p1 {display:block; width:250px; height:10px; text-decoration:none; background:#fff; top:0; left:0; border:0;} 
#prjLoefflerResidence a.p1:visited {display:block; width:250px; height:10px; text-decoration:none; background:#fff; top:0; left:0; border:0;}
#prjLoefflerResidence a img {border:0; width:75px; height:75px;} /* KDG: Added width and height here for thumbnail display. */
#prjLoefflerResidence a.p1:hover {text-decoration:none; background-color:White; color:#000;}
#prjLoefflerResidence a .large {display:block; position:absolute; width:0; height:0; border:0; top:0; left:0;}
#prjLoefflerResidence a.p1:hover .large {display:block; position:absolute; top:-160px; left:440px; width:360px; height:300px; border:10px solid #ccc;}

#prjMCC {position:absolute; top:415px; left:20px; width:250px; background-color:#fff; z-index:100;}
#prjMCC a.p1 {display:block; width:250px; height:10px; text-decoration:none; background:#fff; top:0; left:0; border:0;} 
#prjMCC a.p1:visited {display:block; width:250px; height:10px; text-decoration:none; background:#fff; top:0; left:0; border:0;}
#prjMCC a img {border:0; width:75px; height:75px;} /* KDG: Added width and height here for thumbnail display. */
#prjMCC a.p1:hover {text-decoration:none; background-color:White; color:#000;}
#prjMCC a .large {display:block; position:absolute; width:0; height:0; border:0; top:0; left:0;}
#prjMCC a.p1:hover .large {display:block; position:absolute; top:-180px; left:440px; width:360px; height:300px; border:10px solid #ccc;}

#prjPetersHonda {position:absolute; top:435px; left:20px; width:200px; background-color:#fff; z-index:100;}
#prjPetersHonda a.p1 {display:block; width:200px; height:10px; text-decoration:none; background:#fff; top:0; left:0; border:0;} 
#prjPetersHonda a.p1:visited {display:block; width:200px; height:10px; text-decoration:none; background:#fff; top:0; left:0; border:0;}
#prjPetersHonda a img {border:0; width:75px; height:75px;} /* KDG: Added width and height here for thumbnail display. */
#prjPetersHonda a.p1:hover {text-decoration:none; background-color:White; color:#000;}
#prjPetersHonda a .large {display:block; position:absolute; width:0; height:0; border:0; top:0; left:0;}
#prjPetersHonda a.p1:hover .large {display:block; position:absolute; top:-200px; left:440px; width:360px; height:300px; border:10px solid #ccc;}

#prjPriorResidence {position:absolute; top:455px; left:20px; width:250px; background-color:#fff; z-index:100;}
#prjPriorResidence a.p1 {display:block; width:250px; height:10px; text-decoration:none; background:#fff; top:0; left:0; border:0;} 
#prjPriorResidence a.p1:visited {display:block; width:250px; height:10px; text-decoration:none; background:#fff; top:0; left:0; border:0;}
#prjPriorResidence a img {border:0; width:75px; height:75px;} /* KDG: Added width and height here for thumbnail display. */
#prjPriorResidence a.p1:hover {text-decoration:none; background-color:White; color:#000;}
#prjPriorResidence a .large {display:block; position:absolute; width:0; height:0; border:0; top:0; left:0;}
#prjPriorResidence a.p1:hover .large {display:block; position:absolute; top:-220px; left:440px; width:360px; height:300px; border:10px solid #ccc;}

#prjRand {position:absolute; top:475px; left:20px; width:250px; background-color:#fff; z-index:100;}
#prjRand a.p1 {display:block; width:250px; height:10px; text-decoration:none; background:#fff; top:0; left:0; border:0;} 
#prjRand a.p1:visited {display:block; width:250px; height:10px; text-decoration:none; background:#fff; top:0; left:0; border:0;}
#prjRand a img {border:0; width:75px; height:75px;} /* KDG: Added width and height here for thumbnail display. */
#prjRand a.p1:hover {text-decoration:none; background-color:White; color:#000;}
#prjRand a .large {display:block; position:absolute; width:0; height:0; border:0; top:0; left:0;}
#prjRand a.p1:hover .large {display:block; position:absolute; top:-240px; left:440px; width:360px; height:300px; border:10px solid #ccc;}

#prjSeacoastTech {position:absolute; top:495px; left:20px; width:250px; background-color:#fff; z-index:100;}
#prjSeacoastTech a.p1 {display:block; width:250px; height:10px; text-decoration:none; background:#fff; top:0; left:0; border:0;} 
#prjSeacoastTech a.p1:visited {display:block; width:250px; height:10px; text-decoration:none; background:#fff; top:0; left:0; border:0;}
#prjSeacoastTech a img {border:0; width:75px; height:75px;} /* KDG: Added width and height here for thumbnail display. */
#prjSeacoastTech a.p1:hover {text-decoration:none; background-color:White; color:#000;}
#prjSeacoastTech a .large {display:block; position:absolute; width:0; height:0; border:0; top:0; left:0;}
#prjSeacoastTech a.p1:hover .large {display:block; position:absolute; top:-260px; left:440px; width:360px; height:300px; border:10px solid #ccc;}

/*
#tstEckman {position:absolute; top:590px; left:20px; width:250px; background-color:#fff; z-index:100;}
#tstEckman a.p1 {display:block; width:250px; height:10px; text-decoration:none; background:#fff; top:0; left:0; border:0;} 
#tstEckman a.p1:visited {display:block; width:250px; height:10px; text-decoration:none; background:#fff; top:0; left:0; border:0;}
#tstEckman a img {border:0; width:75px; height:75px;} 
#tstEckman a.p1:hover {text-decoration:none; background-color:White; color:#000;}
#tstEckman a .large {display:block; position:absolute; width:0; height:0; border:0; top:0; left:0;}
#tstEckman a.p1:hover .large {display:block; position:absolute; top:-260px; left:440px; width:360px; height:300px; border:10px solid #ccc;}
*/

/* Do not show the testimonial when the page loads */
/* FROM: http://meyerweb.com/eric/css/edge/popups/demo.html */

.TestimonialContainer
{
   display: block;
   position: absolute; 
   top: 560px; left: 320px; width: 500px; height: 230; 
   padding: 5px; margin: 10px; z-index: 100;
   color: Black; /* background: #FFFFCC; */
   font: 18px Times New Roman, sans-serif; text-align: left;
   
   background-color: #FFFFCC;
    
   border-top-color: Black;
   border-top-style: solid;
   border-top-width: thin; 
        
   border-left-color: Black;
   border-left-style: solid;
   border-left-width: thin; 

   border-bottom-width: medium; 
   border-bottom-color: Gray;
   border-bottom-style: solid; 
        
   border-right-width: medium; 
   border-right-color: Gray;
   border-right-style: solid; 
    
}

div#tstEckman {position: absolute; top: 560px; left: 20px; width: 200px; height: 100px; z-index: 100;
               text-decoration: none;}

div#tstEckman a {text-decoration: none;}
div#tstEckman a span { display: none;  }

div#tstEckman a:hover span 
{
   display: block;
   position: absolute; 
   top: 0px; left: 300; width: 500px; height: 230; 
   padding: 5px; margin: 10px; z-index: 100;
   color: Black; /* background: #FFFFCC; */
   font: 18px Times New Roman, sans-serif; text-align: left;
   
   background-color: #FFFFCC;
    
   border-top-color: Black;
   border-top-style: solid;
   border-top-width: thin; 
        
   border-left-color: Black;
   border-left-style: solid;
   border-left-width: thin; 

   border-bottom-width: medium; 
   border-bottom-color: Gray;
   border-bottom-style: solid; 
        
   border-right-width: medium; 
   border-right-color: Gray;
   border-right-style: solid; 
}

div#tstSullivan {position: absolute; top: 580px; left: 20px; width: 200px; height: 100px; z-index: 100;
               text-decoration: none;}

div#tstSullivan a {text-decoration: none;}
div#tstSullivan a span { display: none;  }

div#tstSullivan a:hover span 
{
   display: block;
   position: absolute; 
   top: -20px; left: 300; width: 500px; height: 230; 
   padding: 5px; margin: 10px; z-index: 100;
   color: Black; /* background: #FFFFCC; */
   font: 18px Times New Roman, sans-serif; text-align: left;
   
   background-color: #FFFFCC;
    
   border-top-color: Black;
   border-top-style: solid;
   border-top-width: thin; 
        
   border-left-color: Black;
   border-left-style: solid;
   border-left-width: thin; 

   border-bottom-width: medium; 
   border-bottom-color: Gray;
   border-bottom-style: solid; 
        
   border-right-width: medium; 
   border-right-color: Gray;
   border-right-style: solid; 
}

div#tstCobbHill {position: absolute; top: 600px; left: 20px; width: 200px; height: 100px; z-index: 100;
               text-decoration: none;}

div#tstCobbHill a {text-decoration: none;}
div#tstCobbHill a span { display: none;  }

div#tstCobbHill a:hover span 
{
   display: block;
   position: absolute; 
   top: -40px; left: 300; width: 500px; height: 230; 
   padding: 5px; margin: 10px; z-index: 100;
   color: Black; /* background: #FFFFCC; */
   font: 18px Times New Roman, sans-serif; text-align: left;
   
   background-color: #FFFFCC;
    
   border-top-color: Black;
   border-top-style: solid;
   border-top-width: thin; 
        
   border-left-color: Black;
   border-left-style: solid;
   border-left-width: thin; 

   border-bottom-width: medium; 
   border-bottom-color: Gray;
   border-bottom-style: solid; 
        
   border-right-width: medium; 
   border-right-color: Gray;
   border-right-style: solid; 
}

div#tstArenco {position: absolute; top: 620px; left: 20px; width: 200px; height: 100px; z-index: 100;
               text-decoration: none;}

div#tstArenco a {text-decoration: none;}
div#tstArenco a span { display: none;  }

div#tstArenco a:hover span 
{
   display: block;
   position: absolute; 
   top: -60px; left: 300; width: 500px; /* height: 230;  automatic height ??? */
   padding: 5px; margin: 10px; z-index: 100;
   color: Black; /* background: #FFFFCC; */
   font: 18px Times New Roman, sans-serif; text-align: left;
   
   background-color: #FFFFCC;
    
   border-top-color: Black;
   border-top-style: solid;
   border-top-width: thin; 
        
   border-left-color: Black;
   border-left-style: solid;
   border-left-width: thin; 

   border-bottom-width: medium; 
   border-bottom-color: Gray;
   border-bottom-style: solid; 
        
   border-right-width: medium; 
   border-right-color: Gray;
   border-right-style: solid; 
}

div#tstStenbak {position: absolute; top: 640px; left: 20px; width: 200px; height: 100px; z-index: 100;
               text-decoration: none;}

div#tstStenbak a {text-decoration: none;}
div#tstStenbak a span { display: none;  }

div#tstStenbak a:hover span 
{
   display: block;
   position: absolute; 
   top: -80px; left: 300; width: 500px; height: 230; 
   padding: 5px; margin: 10px; z-index: 100;
   color: Black; /* background: #FFFFCC; */
   font: 18px Times New Roman, sans-serif; text-align: left;
   
   background-color: #FFFFCC;
    
   border-top-color: Black;
   border-top-style: solid;
   border-top-width: thin; 
        
   border-left-color: Black;
   border-left-style: solid;
   border-left-width: thin; 

   border-bottom-width: medium; 
   border-bottom-color: Gray;
   border-bottom-style: solid; 
        
   border-right-width: medium; 
   border-right-color: Gray;
   border-right-style: solid; 
}

/* KDG: Changed position to absolute. */

#enlargeImg1 {position:absolute; top:260px; left:10px; width:75px; background-color:#fff; z-index:100;}
#enlargeImg1 a.p1 {display:block; width:5px; height:5px; text-decoration:none; background:#fff; top:0; left:0; border:0;} 
#enlargeImg1 a.p1:visited {display:block; width:75px; height:75px; text-decoration:none; background:#fff; top:0; left:0; border:0;}
#enlargeImg1 a img {border:0; width:75px; height:75px;} /* KDG: Added width and height here for thumbnail display. */
#enlargeImg1 a.p1:hover {text-decoration:none; background-color:#8c97a3; color:#000;}
#enlargeImg1 a .large {display:block; position:absolute; width:0; height:0; border:0; top:0; left:0;}
#enlargeImg1 a.p1:hover .large {display:block; position:absolute; top:0px; left:440px; width:360px; height:300px; border:10px solid #ccc;}

#enlargeImg2 {position:absolute; top:260px; left:90px; width:75px; background-color:#fff; z-index:100;}
#enlargeImg2 a.p1 {display:block; width:5px; height:5px; text-decoration:none; background:#fff; top:0; left:0; border:0;} 
#enlargeImg2 a.p1:visited {display:block; width:75px; height:75px; text-decoration:none; background:#fff; top:0; left:0; border:0;}
#enlargeImg2 a img {border:0; width:75px; height:75px;} /* KDG: Added width and height here for thumbnail display. */
#enlargeImg2 a.p1:hover {text-decoration:none; background-color:#8c97a3; color:#000;}
#enlargeImg2 a .large {display:block; position:absolute; width:0; height:0; border:0; top:0; left:0;}
#enlargeImg2 a.p1:hover .large {display:block; position:absolute; top:0px; left:360px; width:360px; height:300px; border:10px solid #ccc;}

#enlargeImg3 {position:absolute; top:260px; left:170px; width:75px; background-color:#fff; z-index:100;}
#enlargeImg3 a.p1 {display:block; width:5px; height:5px; text-decoration:none; background:#fff; top:0; left:0; border:0;} 
#enlargeImg3 a.p1:visited {display:block; width:75px; height:75px; text-decoration:none; background:#fff; top:0; left:0; border:0;}
#enlargeImg3 a img {border:0; width:75px; height:75px;} /* KDG: Added width and height here for thumbnail display. */
#enlargeImg3 a.p1:hover {text-decoration:none; background-color:#8c97a3; color:#000;}
#enlargeImg3 a .large {display:block; position:absolute; width:0; height:0; border:0; top:0; left:0;}
#enlargeImg3 a.p1:hover .large {display:block; position:absolute; top:0px; left:280px; width:360px; height:300px; border:10px solid #ccc;}

#enlargeImg4 {position:absolute; top:260px; left:250px; width:75px; background-color:#fff; z-index:100;}
#enlargeImg4 a.p1 {display:block; width:5px; height:5px; text-decoration:none; background:#fff; top:0; left:0; border:0;} 
#enlargeImg4 a.p1:visited {display:block; width:75px; height:75px; text-decoration:none; background:#fff; top:0; left:0; border:0;}
#enlargeImg4 a img {border:0; width:75px; height:75px;} /* KDG: Added width and height here for thumbnail display. */
#enlargeImg4 a.p1:hover {text-decoration:none; background-color:#8c97a3; color:#000;}
#enlargeImg4 a .large {display:block; position:absolute; width:0; height:0; border:0; top:0; left:0;}
#enlargeImg4 a.p1:hover .large {display:block; position:absolute; top:0px; left:200px; width:360px; height:300px; border:10px solid #ccc;}

/* this syntax works for preloading an image.  However, thumbs will need to be created. */

#respreload a.preld { display: inline; position:absolute; top: 340px; width: 75px; height: 75px; background-image: url(residential/residential_2.jpg);}

/* row 1 */
#cmrclImg1 {position:absolute; top:260px; left:10px; width:75px; background-color:#fff; z-index:100;}
#cmrclImg1 a.p1 {display:block; width:5px; height:5px; text-decoration:none; background:#fff; top:0; left:0; border:0;} 
#cmrclImg1 a.p1:visited {display:block; width:75px; height:75px; text-decoration:none; background:#fff; top:0; left:0; border:0;}
#cmrclImg1 a img {border:0; width:75px; height:75px;} /* KDG: Added width and height here for thumbnail display. */
#cmrclImg1 a.p1:hover {text-decoration:none; background-color:#8c97a3; color:#000;}
#cmrclImg1 a .large {display:block; position:absolute; width:0; height:0; border:0; top:0; left:0;}
#cmrclImg1 a.p1:hover .large {display:block; position:absolute; top:0px; left:440px; width:360px; height:300px; border:10px solid #ccc;}

#cmrclImg2 {position:absolute; top:260px; left:90px; width:75px; background-color:#fff; z-index:100;}
#cmrclImg2 a.p1 {display:block; width:5px; height:5px; text-decoration:none; background:#fff; top:0; left:0; border:0;} 
#cmrclImg2 a.p1:visited {display:block; width:75px; height:75px; text-decoration:none; background:#fff; top:0; left:0; border:0;}
#cmrclImg2 a img {border:0; width:75px; height:75px;} /* KDG: Added width and height here for thumbnail display. */
#cmrclImg2 a.p1:hover {text-decoration:none; background-color:#8c97a3; color:#000;}
#cmrclImg2 a .large {display:block; position:absolute; width:0; height:0; border:0; top:0; left:0;}
#cmrclImg2 a.p1:hover .large {display:block; position:absolute; top:0px; left:480px; width:240px; height:300px; border:10px solid #ccc;}

#cmrclImg3 {position:absolute; top:260px; left:170px; width:75px; background-color:#fff; z-index:100;}
#cmrclImg3 a.p1 {display:block; width:5px; height:5px; text-decoration:none; background:#fff; top:0; left:0; border:0;} 
#cmrclImg3 a.p1:visited {display:block; width:75px; height:75px; text-decoration:none; background:#fff; top:0; left:0; border:0;}
#cmrclImg3 a img {border:0; width:75px; height:75px;} /* KDG: Added width and height here for thumbnail display. */
#cmrclImg3 a.p1:hover {text-decoration:none; background-color:#8c97a3; color:#000;}
#cmrclImg3 a .large {display:block; position:absolute; width:0; height:0; border:0; top:0; left:0;}
#cmrclImg3 a.p1:hover .large {display:block; position:absolute; top:0px; left:400px; width:240px; height:300px; border:10px solid #ccc;}

#cmrclImg4 {position:absolute; top:260px; left:250px; width:75px; background-color:#fff; z-index:100;}
#cmrclImg4 a.p1 {display:block; width:5px; height:5px; text-decoration:none; background:#fff; top:0; left:0; border:0;} 
#cmrclImg4 a.p1:visited {display:block; width:75px; height:75px; text-decoration:none; background:#fff; top:0; left:0; border:0;}
#cmrclImg4 a img {border:0; width:75px; height:75px;} /* KDG: Added width and height here for thumbnail display. */
#cmrclImg4 a.p1:hover {text-decoration:none; background-color:#8c97a3; color:#000;}
#cmrclImg4 a .large {display:block; position:absolute; width:0; height:0; border:0; top:0; left:0;}
#cmrclImg4 a.p1:hover .large {display:block; position:absolute; top:0px; left:320px; width: 240px; height:300px; border:10px solid #ccc;}


/* row 2 */ 
#cmrclImg5 {position:absolute; top:340px; left:10px; width:75px; background-color:#fff; z-index:100;}
#cmrclImg5 a.p1 {display:block; width:5px; height:5px; text-decoration:none; background:#fff; top:0; left:0; border:0;} 
#cmrclImg5 a.p1:visited {display:block; width:75px; height:75px; text-decoration:none; background:#fff; top:0; left:0; border:0;}
#cmrclImg5 a img {border:0; width:75px; height:75px;} /* KDG: Added width and height here for thumbnail display. */
#cmrclImg5 a.p1:hover {text-decoration:none; background-color:#8c97a3; color:#000;}
#cmrclImg5 a .large {display:block; position:absolute; width:0; height:0; border:0; top:0; left:0;}
#cmrclImg5 a.p1:hover .large {display:block; position:absolute; top:-75px; left:440px; width:360px; height:300px; border:10px solid #ccc;}

#cmrclImg6 {position:absolute; top:340px; left:90px; width:75px; background-color:#fff; z-index:100;}
#cmrclImg6 a.p1 {display:block; width:5px; height:5px; text-decoration:none; background:#fff; top:0; left:0; border:0;} 
#cmrclImg6 a.p1:visited {display:block; width:75px; height:75px; text-decoration:none; background:#fff; top:0; left:0; border:0;}
#cmrclImg6 a img {border:0; width:75px; height:75px;} /* KDG: Added width and height here for thumbnail display. */
#cmrclImg6 a.p1:hover {text-decoration:none; background-color:#8c97a3; color:#000;}
#cmrclImg6 a .large {display:block; position:absolute; width:0; height:0; border:0; top:0; left:0;}
#cmrclImg6 a.p1:hover .large {display:block; position:absolute; top:-75px; left:360px; width:360px; height:300px; border:10px solid #ccc;}

#cmrclImg7 {position:absolute; top:340px; left:170px; width:75px; background-color:#fff; z-index:100;}
#cmrclImg7 a.p1 {display:block; width:5px; height:5px; text-decoration:none; background:#fff; top:0; left:0; border:0;} 
#cmrclImg7 a.p1:visited {display:block; width:75px; height:75px; text-decoration:none; background:#fff; top:0; left:0; border:0;}
#cmrclImg7 a img {border:0; width:75px; height:75px;} /* KDG: Added width and height here for thumbnail display. */
#cmrclImg7 a.p1:hover {text-decoration:none; background-color:#8c97a3; color:#000;}
#cmrclImg7 a .large {display:block; position:absolute; width:0; height:0; border:0; top:0; left:0;}
#cmrclImg7 a.p1:hover .large {display:block; position:absolute; top:-75px; left:280px; width:360px; height:300px; border:10px solid #ccc;}

#cmrclImg8 {position:absolute; top:340px; left:250px; width:75px; background-color:#fff; z-index:100;}
#cmrclImg8 a.p1 {display:block; width:5px; height:5px; text-decoration:none; background:#fff; top:0; left:0; border:0;} 
#cmrclImg8 a.p1:visited {display:block; width:75px; height:75px; text-decoration:none; background:#fff; top:0; left:0; border:0;}
#cmrclImg8 a img {border:0; width:75px; height:75px; } /* KDG: Added width and height here for thumbnail display. */
#cmrclImg8 a.p1:hover {text-decoration:none; background-color:#8c97a3; color:#000;}
#cmrclImg8 a .large {display:block; position:absolute; width:0; height:0; border:0; top:0; left:0;}
#cmrclImg8 a.p1:hover .large {display:block; position:absolute; top:-75px; left:200px; width: 360px; height:300px; border:10px solid #ccc;}

#cmrclImg9 {position:absolute; top:340px; left:250px; width:75px; background-color:#fff; z-index:100;}
#cmrclImg9 a.p1 {display:block; width:5px; height:5px; text-decoration:none; background:#fff; top:0; left:0; border:0;} 
#cmrclImg9 a.p1:visited {display:block; width:75px; height:75px; text-decoration:none; background:#fff; top:0; left:0; border:0;}
#cmrclImg9 a img {border:0; width:75px; height:75px; } /* KDG: Added width and height here for thumbnail display. */
#cmrclImg9 a.p1:hover {text-decoration:none; background-color:#8c97a3; color:#000;}
#cmrclImg9 a .large {display:block; position:absolute; width:0; height:0; border:0; top:0; left:0;}
#cmrclImg9 a.p1:hover .large {display:block; position:absolute; top:-75px; left:200px; width: 360px; height:300px; border:10px solid #ccc;}

/**/

#defaultIntro
{
    left: 10px;
    top: 120px;
    width: 820px; 
    height: 120px; 
    background-color: White;
    color: black;
    font-size: xx-large;
    font-family: Times New Roman; 
    text-align: center; 
}

#missionStatement 
{
    left: 10px; 
    top: 140px; /* do not show default intro, above */
    width: 810px; 
    height: 280px; 
    background-color: White;
    color: black;
    font-size: 30px; 
    font-family: Times New Roman;  
    border: .2em solid black;
/*  
    border-color: Black; 
  border-width: thick; 
*/ 
}

#generators
{
    left: 10px; 
    top: 120px; /* do not show default intro, above */
    width: 820px; 
    height: 300px; 
    background-color: White;
    color: black;
    font-size: 30px; 
    font-family: Times New Roman;    
}

#generators p 
{
    text-align: center; 
}

#aboutUs
{
    left: 10px; 
    top: 120px; /* do not show default intro, above */
    width: 820px; 
    height: 340px; 
    background-color: White;
    color: black;
    font-size: large; 
    font-family: Times New Roman;      
}

#staff
{
    left: 10px; 
    top: 480px; /* do not show default intro, above */
    width: 820px; 
    height: 510px; 
    background-color: White;
    color: black;
    font-size: large; 
    font-family: Times New Roman;      
}

#button {
	color: black;
	background-color: white;
}

#button:hover {
	color: white; 
	background-color:black;
}

#project {
	color: white;
}

#project:hover  
{
    text-decoration: underline;
	cursor:pointer
}

#project:active {
	color: white; 	
}

#ProjectHeading {
	color: black;
	font-size: large;
}

#id_addr
{
    position: absolute; /* relative; */ 
    top: 10px;
    left: 460px; 
    font-size: 25px;
}

#id_state
{
    position: absolute; /* relative; */ 
    top: 35px;
    left: 460px; 
    font-size: 25px;
}

#id_phone
{
    position: absolute; /* relative; */
    top: 60px; 
    left: 460px; 
    font-size: 25px;
}

#id_fax
{
    position: absolute; /* relative; */
    top: 87px; 
    left: 460px; 
    font-size: 25px;
}



.div_phone {
	text-align: left ;	
	top: 10px;
	left: 450px;
}

.div_address {
	text-align: left ;	
	top: 20px;
	left: 450px; 
	border: thin
}

.div_home {
	text-align: center; 
	border-style: solid;
	border-width: thin;	
	color: #33CC33; 
	width: 107px; 
	top: 100px;
	left: 10px;
	background-color:white; 
}

.div_menuBar /* V3.0 */
{
    position: relative;
    
    top: 140px;   
    height: 30px;
    width: 98%; /* was 98% */
    
    /*
    border-top-style: solid;
    border-top-color: Black; 
    border-bottom-style: solid;
    border-bottom-color: Black; 
*/ 
}

.div_AboutUsSubMenuBar /* V3.0 */
{
    position: relative;
    
    top: 141px;  
    left: 50px;  
    height: 30px;
    width: 98%;
    z-index: 2; 
 /*
    border-top-style: solid;
    border-top-color: Black; 
    border-bottom-style: solid;
    border-bottom-color: Black; 
*/ 
 
}

#id_button_home
{
    position: relative; 
    color: black;
	background-color: white;
	top: 150px;
	left: 20px; 
	width: 300px; 
	text-decoration: none;
	background-color: Blue; 
}
/*
#id_button_home:hover {
	color: white; 
	background-color:black;
}
*/ 

/*
.div_home:hover {
	color: white; 
	background-color:black;
}*/ 

#navigation /* V3.0 */ 
{
  list-style: none;
  margin: 0; /* removes left margin */
  /* can set this later, must be under margin property: margin-bottom: 10px; */
  padding: 0;
}

#navigation li { /* V3.0 */ 
   float: left;
}

#navigation li a /* V3.0 */ 
{
    /* kdg adds border */
    border-top-color: Gray;
    border-top-style: solid;
    border-top-width: medium;
    
    border-bottom-color: Gray;
    border-bottom-style: solid;
    border-bottom-width: medium;
    
    border-right-color: Black;
    border-right-style: solid;
    border-right-width: thin; 
    
    display: block;

    width: 120px;
    text-align: center;
    font-weight: bold; 
    padding: 3px 0;
    text-decoration: none; 
    
    color: Black;
    background-color: #1874CD;

}

#navigation li a:hover { /* V3.0 */ 
   background-color: #104E8B; 
   color: White;
}

/* About Us Sub Menu: About Us and Our Staff */ 

#navigationAboutUs /* V3.0 */ 
{
  list-style: none;
  margin: 0; /* removes left margin */
  /* can set this later, must be under margin property: margin-bottom: 10px; */
  padding: 0;
}

#navigationAboutUs li { /* V3.0 */ 
   float: left;
}

#navigationAboutUs li a /* V3.0 */ 
{
    /* kdg adds border */
    border-top-color: black;
    border-top-style: solid;
    border-top-width: thin; 
    
    border-bottom-color: black; /* #FFFFCC; Yellowish - Need to apply selectively if this works. */
    border-bottom-style: solid;
    border-bottom-width: thin; /* medium for yellowish*/
    
    border-right-color: Black;
    border-right-style: solid;
    border-right-width: thin; 
        
    border-left-color: black;
    border-left-style: solid;
    border-left-width: thin; 
    
    display: block;

    width: 120px;
    text-align: center;
    font-weight: bold; 
    padding: 3px 0;
    /* padding-top: 3px; */
    /* padding-right: 5px; */
    text-decoration: none; 
    
    color: Black;
    background-color: #FFFFCC; /* yellowish color found in AboutUsContainer*/
}

#navigationAboutUs li a:hover { /* V3.0 */ 
   background-color: Green; 
   color: White;
}

.div_AboutUsContainer /* V3.0 */
{ 
    position: relative; /* inside div_centerPage */ 
    
    top: 140px; 
    left: 50px;
    width: 600px; 
    height: 400px;
    
    /* See http://www.yourhtmlsource.com/stylesheets/cssspacing.html for explanation of padding. */ 
    padding-left: 20px; 
    padding-top: 20px; 
    
    font-size: large;
    font-weight: bold; 
   
    background-color: #FFFFCC;
    
    border-top-color: Black;
    border-top-style: solid;
    border-top-width: thin; 
        
    border-left-color: Black;
    border-left-style: solid;
    border-left-width: thin; 

    border-bottom-width: medium; 
    border-bottom-color: Gray;
    border-bottom-style: solid; 
        
    border-right-width: medium; 
    border-right-color: Gray;
    border-right-style: solid; 
    z-index: 1; 
}

.div_centerPage /* V3.0 */
{ 
    position: absolute; /* will this mess up our buttons ??? */ 
    
    left: 100px;
    width: 900px; 
    height: 900px; 
    background-color: White; 
    border-left-color: Gray;
    border-left-style: solid; 
    border-right-color: Gray; 
    border-right-style: solid; 
}


.div_mainPageStatement /* V3.0 */
{ 
    position: relative; /* inside div_centerPage */ 
    
    top: 162px; 
    left: 20px; /* was 50 */

    width: 680px; /* 770px; */
    /* height: 380px; */
    
    /* See http://www.yourhtmlsource.com/stylesheets/cssspacing.html for explanation of padding. */ 
    padding-left: 20px; 
    padding-top: 20px; 
    padding-bottom: 20px; 
    
    font-size: 25px;
   /* font-weight: bold; */
   
    background-color: #FFFFCC;
    
    border-top-color: Black;
    border-top-style: solid;
    border-top-width: thin; 
        
    border-left-color: Black;
    border-left-style: solid;
    border-left-width: thin; 

    border-bottom-width: medium; 
    border-bottom-color: Gray;
    border-bottom-style: solid; 
        
    border-right-width: medium; 
    border-right-color: Gray;
    border-right-style: solid; 
}


.div_missionStatementContainer /* V3.0 */
{ 
    position: relative; /* inside div_centerPage */ 
    
    top: 162px; 
    left: 50px;

    width: 770px;
    /* height: 380px; */
    
    /* See http://www.yourhtmlsource.com/stylesheets/cssspacing.html for explanation of padding. */ 
    padding-left: 20px; 
    padding-top: 20px; 
    padding-bottom: 20px; 
    
    font-size: 25px;
   /* font-weight: bold; */
   
    background-color: #FFFFCC;
    
    border-top-color: Black;
    border-top-style: solid;
    border-top-width: thin; 
        
    border-left-color: Black;
    border-left-style: solid;
    border-left-width: thin; 

    border-bottom-width: medium; 
    border-bottom-color: Gray;
    border-bottom-style: solid; 
        
    border-right-width: medium; 
    border-right-color: Gray;
    border-right-style: solid; 
}

#jimEmail /* V3.0 */
{
 position: relative;
 left: 65px;    
}

.div_ContactPresidentContainer /* V3.0 */
{
    position: relative; /* inside div_centerPage */ 
    
    top: 162px; 
    left: 50px;
    
    width: 370px; 
    height: 160px;

    /* See http://www.yourhtmlsource.com/stylesheets/cssspacing.html for explanation of padding. */ 
    padding-left: 20px; 
    padding-top: 20px; 
    
    font-size: 23px;
    /* font-weight: bold; */
   
    /*background-color: #FFFFCC;*/
    
    border-top-color: White;
    border-top-style: solid;
    border-top-width: thin; 
        
    border-left-color: White; /* black */
    border-left-style: solid;
    border-left-width: thin; 

    border-bottom-width: medium; 
    border-bottom-color: White; /* gray */
    border-bottom-style: solid; 
        
    border-right-width: medium; 
    border-right-color: white; /* gray */ 
    border-right-style: solid; 
}

.div_ContactJimContainer /* V3.0 */
{
    position: relative; /* inside div_centerPage */ 
    
    top: 185px; 
    left: 50px;

    width: 370px; 
    height: 160px;

    /* See http://www.yourhtmlsource.com/stylesheets/cssspacing.html for explanation of padding. */ 
    padding-left: 20px; 
    padding-top: 20px; 
    
    font-size: 23px;
    /* font-weight: bold; */
   
    /*background-color: #FFFFCC;*/
    
    border-top-color: White;
    border-top-style: solid;
    border-top-width: thin; 
        
    border-left-color: White; /* black */
    border-left-style: solid;
    border-left-width: thin; 

    border-bottom-width: medium; 
    border-bottom-color: White; /* gray */
    border-bottom-style: solid; 
        
    border-right-width: medium; 
    border-right-color: white; /* gray */ 
    border-right-style: solid; 
}

.div_ContactGeneralContainer /* V3.0 */
{
    position: relative; /* inside div_centerPage */ 
    
    top: 215px; 
    left: 50px;

    width: 370px; 
    height: 160px;
    
    /* See http://www.yourhtmlsource.com/stylesheets/cssspacing.html for explanation of padding. */ 
    padding-left: 20px; 
    padding-top: 20px; 
    
    font-size: 23px;
    /* font-weight: bold; */
   
    background-color: #FFFFCC;
    
    border-top-color: Black;
    border-top-style: solid;
    border-top-width: thin; 
        
    border-left-color: Black;
    border-left-style: solid;
    border-left-width: thin; 

    border-bottom-width: medium; 
    border-bottom-color: Gray;
    border-bottom-style: solid; 
        
    border-right-width: medium; 
    border-right-color: Gray;
    border-right-style: solid; 
}


.div_listSqlare /* V3.0 */
{
    list-style-type: square;
}

.div_centerPage:hover
{
    
    left: 100px;
    width: 900px; 
    height: 1000px;
    background-color: White; 
    border-left-color: Gray;
    border-left-style: solid; 
    border-right-color: Gray; 
    border-right-style: solid; 
}

.div_residential /* V3.0 */ 
{
    border-style: none;
    position:relative;
    top: 162px;
    left: 20px; 
    height: 500px;
    width: 680px; 
    font-size: 20px; 
    
    padding-left: 20px; 
    padding-top: 20px; 
}

.div_commercial { /* V3.0 */ 
    border-style: none;
    position:relative;
    top: 162px;
    left: 20px; 
    height: 500px;
    width: 680px; 
    font-size: 20px; 
    
    padding-left: 20px; 
    padding-top: 20px; 
}

.div_generators { /* V3.0 */ 
    border-style: none;
    position:relative;
    top: 162px;
    left: 20px; 
    height: 500px;
    width: 680px; 
    font-size: 20px; 
    
    padding-left: 20px; 
    padding-top: 20px; 
}

.div_aboutUs {   /* V3.0 */
 
    border-style: none;
    position:relative;
    top: 162px;
    left: 20px; 
    height: 500px;
    width: 680px; 
    font-size: 20px; 
 
    
    /* extends center page div */  
    /*
    position: relative; 
    
    font-size: large;
    font-weight: bold; 
    
    padding-left: 20px; 
    padding-top: 20px; 
    
    top: 150; 
    left: -2px;
    width: 900px; 
    height: 1500px; 
    background-color: White; 
    border-left-color: Gray;
    border-left-style: solid; 
    border-right-color: Gray; 
    border-right-style: solid; 
*/ 
    
}

.div_projects {   /* V3.0 */
    border-style: none;
    position:relative;
    top: 150px;
    left: 20px; 
    height: 500px;
    width: 800px; 
    font-size: 20px; 
    
    padding-left: 20px; 
    padding-top: 20px; 
}

.div_testimonials{   /* V3.0 */
    border-style: none;
    position:relative;
    top: -20px;
    left: 20px; 
    height: 20px;
    width: 700px; 
    font-size: 20px; 
}


.div_emailTest /* V3.0 */ 
{
    border-style: none;
    position:relative;
    top: 150px;
    left: 20px; 
    height: 500px;
    width: 800px; 
    font-size: 20px; 
}

.div_contacts {
	text-align: center; 
	border-style: solid;
	border-width: thin;	
	color: #33CC33; 
	width: 107px; 
	top: 100px;
	left:720px;
	background-color:white; 
}

.p_projects {
	position: absolute;
	top: 90px;
	width: 825px; 
}

.p_aboutUs {
	position: absolute;
	top: 100px;
	width: 825px; 
	/*left: 0px; */
}

.p_staff {
	position: absolute;
	top: 150px;
	width: 825px; 
}


/* image classes */
.img_main_title {
	position: absolute;
	top: 10px;
	left: 10px; /* ~ 120 for middle */ 
	border-color: Gray; 
	/*
	width: 100; 
	height: 50;
    */
}

.img_project_top {
	position: absolute;
	top: 115px;
	left: 350px; 
}

.hiddenPic
{
    display:none; 
}