/**
 *DATE CREATED: 17/09/08
 *AUTHOR: Alice Athens
 *styleSheet.css
 *Created for Beer Fridge and their client Carter Electrical
 *Contains all styleing for the whole website works in booth IE and FireFox
**/



html, body
{
    margin: 0 auto;
    padding:0;
    /*overflow: hidden;*/
    font-family: tahoma, verdana, times new roman;
    background-color: #cccccc;
}


/*container div contains all other div's*/

#container
{
    width: 1003px;
    height: 628px;
    position: relative;
    margin: 0 auto;
    
}

#childContainer
{
    position: absolute;
    top: 113pt;
    width: 1003px;
    height: 478px;
    background-image: url("../images/childContainerBackground.jpg");
    background-repeat: repeat-x;
     
}

/*header div styleing*/
#header
{
    width:1003px;
    height: 100px;
    position: relative;
    background-image: url("../images/headerBackground.jpg");
    background-repeat: repeat-x;
    z-index: 30;
}


.logo
{
    position: absolute;
    top: -1pt;
    left: 55pt;
    z-index: 100;
    
}

/*styles the bright ideas image inside the header*/
.bI
{
    position: absolute;
    right: 30pt;
    top: 3pt;
}

/*menu div contains navigation links and company name*/
#navBar
{
    
    position: absolute;
    top: 75pt;
    width: 1003px;
    height: 50px;
    background-image: url("../images/menuBackground.jpg");
    background-repeat: repeat-x;
    z-index: 20;
    
    
}

/*styles the company name picture that is below the logo*/
#companyName
{
    position: absolute;
    left: 10pt;
    width: 280px;
    height: 50px;
    background-image: url("../images/companyName.jpg");
    background-repeat: no-repeat;
    z-index: 50;
}

/* NAVIGATION*/
/*this is the menu div it contains the <ul> and navigation links*/
#menu
{
    position: absolute;
    top: 0pt;
    right: 0pt;
    width: 723px;
    height: 50px;
    
}

ul
{
    list-style-type: none;
}

/*sets the styleing for each <li> class*/
.m2, .m3, .m4, .m5, .m6
{
    position: absolute;
    top: 0pt;
    background-image: url("../images/button.gif");
    background-repeat: no-repeat;
    width: 136px;
    height: 50px;
    text-align: center;
 
}

.m2
{
    left: 20pt; 
}

.m3
{
    left:124pt;
}
.m4
{
    left:227pt;
}
.m5
{
    left:331pt;
}
.m6
{
    left:435pt;
}

li a
{
 text-decoration: none;
 color: #ffffff;
 font-size: 13pt;
 font-family: tahoma, verdana, times new roman;
}

/* for when the link is just a link*/
ul.m1 li a:link
{
	width: 136px;
	height: 50px;
        color: #ffffff;
	text-decoration: none; /* takes away the underling on the link*/
	text-align: center;
	float: left;
	border: none;
        padding-top: 14px;
	
	

}
/*when the link is active */
.m1 a:active
{
	width: 136px;
	height: 50px;
	color: #ffffff;
	text-decoration: none; /* takes away the underling on the link*/
	text-align: center;
	padding-top: 14px;
	float: left;
	

}

/*when the link has been visited */
.m1 a:visited 
{
	width: 136px;
	height: 50px;
	color: #ffffff;
	text-decoration: none; /* takes away the underling on the link*/
	text-align: center;
	padding-top: 14px;
	float: left;
	
	
}


/* this changes my links to a different color when the users are hovering over the link*/
ul.m1 li a:hover 
{
	
    color: #000000;
    /*background-image: url("../images/hover.gif");
    background-repeat: no-repeat;*/
	
}



/*content div contains each page's text*/
#content
{
    width: 580px;
    height: 330px;
    position: absolute;
    left: 30pt;
    top: 15pt;
    z-index: 99;
    border-style: double;
    border-width: thick;
    border-color: #91a3bb;
    background-image: url("../images/contentBackground.png");
    padding: 10px;
    
}

/*image that is displayed with-in the content <p> tags*/
.contentImageIndex
{
    position:absolute;
    top: 10pt;
    right: 8pt;
    background-image: url("../images/saturn.png");
    background-repeat: no-repeat;
    width: 150px;
    height: 205px;
   
}

.contentImageAboutus
{
    
    background-image: url("../images/phasetester.png");
    background-repeat: no-repeat;
    height: 303px;
    width: 152px;
    position:absolute;
    top: 10pt;
    right: 8pt;
   
}

.contentImage
{
    position:absolute;
    top: 10pt;
    right: 8pt;
   
}
 /*image for contact page*/
.contentImageContact
{
    position:absolute;
    top: 7pt;
    right: 8pt;
    background-image: url("../images/deskphone.png");
    background-repeat: no-repeat;
    width: 276px;
    height: 238px;
   
}
/*image for Quote page*/
.contentImageQuote
{
    position:absolute;
    top: 13pt;
    right: 8pt;
}
/*image for services page*/
.contentImageScrew
{
    position:absolute;
    top: 7pt;
    right: 4pt;
    background-image: url("../images/screwdriver.png");
    background-repeat: no-repeat;
    width: 228px;
    height: 317px;
}

/*conatins the light bulb image*/
#sidePannelImage
{
    width: 280px;
    height: 468px;
    position: absolute;
    right: 20pt;
    top: 7.5pt;
    background-image: url("../images/lightBulb.jpg");
    background-repeat: no-repeat;
    z-index: 1;
}

/*footer div contains copy right statment*/
#footer
{
    font-size: 10pt;
    color: #ffffff;
    
}

/*contact phone numbers inside footer*/
#phoneNumb
{
    position: absolute;
    left: 290pt;
    bottom: 19pt;
    font-size: 12pt;
}

/*copy right statement*/
#copyRight
{
    position: absolute;
    left: 210pt;
    bottom: 4pt;
    color: #ffffff;
    z-index: 50;
    
}

#copyRight a
{
    
    color: #ffffff;
    text-decoration: none;
    
}

#copyRight a:hover
{
   text-decoration: underline;
    
}


/*styleing for the h1 tag on each page*/
h1
{
    
    font-family: tahoma, verdana, times new roman;
    font-size: 14pt;
    float: left;
    margin: 0;
    padding: 0;
    white-space: normal;
    color: #ffffff;
    
}

/*styles the paragraphs inside the content div*/
p
{
    font-size: 11pt;
    float: left;
    text-align: left;
    white-space: normal;
    
    color: #ffffff;
    margin-right: 20px;
    
   
}

/*div that contains content text*/
#text
{
    width: 450px;
    height: 300px;
    float: left;
    padding-left: 15px;
}

#textForm
{
    width: 345px;
    height: 340px;
    overflow: auto;
    margin-left: 10px;
   
}


/*div that contains content text on the contact page*/
#textContact
{
    width: 450px;
    height: 300px;
    float: left;
    padding-left: 40px;
}

/*<ul> list on the services page*/
.servicesList
{
    color: #ffffff;
    list-style-type: circle;
    
}

/*list for phone numbers on contact page*/
.phoneNumberList
{
    font-size: 15pt;
    font-weight: bold;
    color: #ffffff;
    
    font-family: tahoma, verdana, times new roman;
    
}

/*makes the email to link styled*/
.email
{
    font-weight: normal;
}

/*list on the contact page containing the address*/
.contactList
{
    color: #ffffff;
    font-family: tahoma, verdana, times new roman;
    text-align: left;
}

/*master electrition logo*/
#mELogo
{
    position: absolute;
    bottom:4pt;
    left: 15pt;
    width: 97px;
    height: 88px;
    background-image: url("../images/masterEle.png");
    background-repeat: no-repeat;
    
    
}

#mELogo a img
{
    border: none;
}

/*Email link*/
a.mail:hover
{
    text-decoration: underline;
}

/*#### FORM STYLEING ####*/

#form1
{
    width: 75%;
    font-size: small;
    color: #ffffff;
    
    
}

legend
{
    font-size: 12pt;
    font-weight: bold;
    color: #ffffff;
}

fieldset
{
    border-style: none;
}
.clear
{
    clear:both;
    height:5px;
    
}

.col0
{
    width: 50%;
}

.col1
{
    width: 40%;
    display:inline;
    float: left;
}

.col2
{
    width: 30%;
   
}

.col3
{
    overflow: auto;
    
}

input
{
    height: 13px;
    font-size: 13px;
}

.extra
{
    float: left;
    font-size: 7pt;
}

#submit
{
    height: 100%;
    font-size: 8pt;
    
   
}