/* ------------- USE THIS CSS FOR  COORDINATION - I need a longer area for content */

/* ------------- "global" styles */
body  {    
	font-family: Georgia, serif;    /* default page font */
    background: #fff url(images/fbluefabric150.jpg) top left;
	background-repeat:	repeat;
    margin: 0;          /* shorthand for all margins = 0 */
    padding: 0;         /* no padding */
}


p, h1, h2, h3, h4, h5, h6, li {
    margin: 1ex 1em;
}


/* outer div wraps around everything but the footer */
div#outerDiv  {
	width:	800px;
	height:	820px;
	margin-left: auto;
	margin-right: auto;
	margin-top:	10px;
	border:	3px dotted #000;
	background: #fff;      /* white content background */ 
}


/* white content background, header image */
div#header {
    height: 175px;      /* set size equal to height you need for header  -- important - main nav sits on bottom of this */
    position: relative;
	}

div#content {
    padding: 5px;
}

#outerDiv a:link, #outerDiv a:visited {
    text-decoration: none;
    color: #5190cc;
	border-bottom: 1px dotted #5190cc;
}

#outerDiv a:hover, #outerDiv a:active {
    color: #666;
    border-bottom: 1px dotted #666;
}

/* ===== Facebook link ===== */
#outerDiv #facebookButton {
    position: absolute;
	top:	8px;
	right: 10px;
 }

#facebookButton a:link, #facebookButton a:visited{
    height: 53px;
    width: 125px;
    display: block;         /* make it a block element */
    text-indent: -1000em;   /* keep the text out of the display */
    background: url(images/facebookLogoDualWhite.gif) no-repeat left top;
    border: none;           /* don't display a border */
	outline: none;
}

#facebookButton a:hover, #facebookButton a:active{
    background-position: left bottom;   /* relocate the image to show the rollover image */
}

 /* ===== header phonenumber ===== */
 div#header p.headerNumber{
	position: absolute;
	color:	#666;
	top: 110px;
	right: 10px;
	font-family: arial, geneva, san serif;
	font-size: 1.1em;
	}
	
	
/* ===== main navigation links ===== */

#header #mainMenu {          /* set the position for the nav elements */
    position: absolute;
	bottom: 0px;
	background-color: #5190cc;
	width:	800px;
    border-top:  2px dotted #333; 
	border-bottom: 2px dotted #333;
	}

#mainMenu ul {               /* turn off all the normal list behavior */
    list-style: none;
    margin: 0;
    padding: 0;
	border: none;
	}

#mainMenu li {               /* turn off the normal list item behavior */
    float: left;
    margin: 0;
    padding:0;
	border: none;
	}

#mainMenu li a:link, #mainMenu li a:visited {
    font-family: Georgia, serif;
	font-size:	.95em;
    display: inline;  
	color: #fff;            /* white text */
    text-decoration: none;  /* no underline */
	padding: 0 38px 0 38px; 
    line-height: 24px;
	outline: none;
	border: none;
	}

#mainMenu li a:hover, #mainMenu li a:active {
    color: #999; 
	text-decoration: none;	
	border: none;
    }
	
#mainMenu  li.mainMenuFirst {
	margin-left: 155px;
	}

#mainMenu ul li a.current {  /* different look for "current" link */
    color: #333;
	text-decoration: none;
	font-weight: bold;
	border: none;
    }

#mainMenu ul li a.current:hover {
    cursor: default;
	text-decoration: none;
	outline: none;
	border: none;
}	
	
/* ===== Second Menu navigation links ===== */

#secondMenu {
	margin-top: -10px;
	padding: 0;
	text-align:	center;
	text-decoration: none;
	}
	
#secondMenu li {
	font-family: Georgia, serif;
	font-size:	.75em;
	display: inline;
	margin: 0 10px 0 10px;
	padding: 0 15px 0 15px;
	text-align:	center;
	text-decoration: none;
	}

#secondMenu li a:link, #secondMenu li a:visited {
	color: #5190cc;
	text-decoration: none;
	outline:	none;
	border-bottom: 2px dotted #5190cc;
}

#secondMenu li a:hover, #secondMenu li a:active {
	color: #666;
	text-decoration: none;
	outline:	none;
	border-bottom: 2px dotted #666;
}
 
 #secondMenu  li.secondMenuFirst {
	margin-left: -22px;
	}
 
#secondMenu li a.secondCurrent {
	color:	#333;
	text-decoration: none;
	outline: none;
	font-weight: bold;
	border-bottom: 2px dotted #333;
		}

 #secondMenu li a.secondCurrent:hover  {
	cursor: default;
		}



/* ===== Third  (Services)  Menu navigation links ===== */
	#thirdMenu {
	margin-top: -10px;
	padding: 0;
	text-align:	center;
	text-decoration: none;
	}
	
#thirdMenu li {
	font-family: Georgia, serif;
	font-size:	.75em;
	display: inline;
	margin: 0 10px 0 10px;
	padding: 0 15px 0 15px;
	text-align:	center;
	text-decoration: none;
	}

#thirdMenu li a:link, #thirdMenu li a:visited {
	color: #5190cc;
	text-decoration: none;
	outline:	none;
	border-bottom: 2px dotted #5190cc;
}

#thirdMenu li a:hover, #thirdMenu li a:active {
	color: #666;
	text-decoration: none;
	outline:	none;
	border-bottom: 2px dotted #666;
}
 
 #thirdMenu  li.thirdMenuFirst {
	margin-left: -22px;
	}
 
#thirdMenu li a.thirdCurrent {
	color:	#333;
	text-decoration: none;
	font-weight: bold;
	outline: none;
	border-bottom: 2px dotted #333;
		}

 #thirdMenu li a.thirdCurrent:hover  {
	cursor: default;
		}
			
	
/* ===== Coordination 3 Column  ===== */
#threeColumnWideTop {
	width:	760px;
	float:	left;
	margin: 0 20px 5px 20px;
	}


#threeColumnLeft {
	width:	236px;
	float:	left;
	margin: 0 10px 5px 20px;
}

#threeColumnMiddle {
	width:	236px;
	float:	left;
	margin: 0 1px 5px 2px;
	padding: 0 12px 0 15px;
	border-right:	1px dotted #666;
	border-left:	1px dotted #666;
	}


#threeColumnRight{
	width:	236px;
	float:	right;
	margin: 0 20px 5px 10px;
}

#threeColumnWideTop p, #threeColumnRight p, #threeColumnMiddle p, #threeColumnLeft p {
    font-family: Georgia, serif;
    font-size: 0.9em;
    line-height: 1.4em;
    color: #333;
    margin: 1ex 0;
}

#threeColumnRight p.smallText, #threeColumnMiddle p.smallText, #threeColumnLeft p.smallText { /* ===== for small text ===== */
    font-family: "Trebuchet MS", sans-serif;
    font-size: 0.8em;
    line-height: 1.2em;
    color: #333;
    margin: 0 0 3ex 0;
}

#threeColumnRight h3, #threeColumnMiddle h3, #threeColumnLeft h3 {
    font-family: Georgia, serif;
    font-size: .90em;
    color: #5190cc;
    text-align: left;
    margin: 1ex 0 .5ex 0;
}


#threeColumnRight ul, #threeColumnMiddle ul, #threeColumnLeft  ul {
  	font-family: "Trebuchet MS", sans-serif;
	font-size:	0.8em;
	margin-left: 0;
	padding-left: 10px;
}

#threeColumnWideBottom {
	width:	760px;
	float:	left;
	margin: 5px 20px 5px 20px;
	}

#threeColumnRight  img.photo {
	padding: 5px 0 0 0;
	}

	/* ===== footer ===== */

div#footer {
    clear: both;
    background: transparent;
    margin: 0 auto;
    padding: 5px;
}

#footer p {
    font-family: "Trebuchet MS", sans-serif;
    font-size: .75em;
    color: #666;
    margin: 0;
    padding: 0;
    text-align: center;
}


/* ===== miscellaneous styles ===== */

.clear { clear: both }

/* ====maybe use this code later         hidden { display: none; ===*/