/* ##### global page styles ##### */	
html, body {
	margin: 5px;
	padding: 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color: white;
/*	color: #663300; this was the older lighter brown color */
	color: #442200;
	font-size: 0.9em;
}

/* ##### global link styles ##### */
a:link { text-decoration:none;color:#E46B00; }
a:visited { text-decoration:none;color:#E46B00; }
a:hover { text-decoration:underline;color:#000000; } 	
a:active { text-decoration:none;color:#E46B00; }

/* ##### wraps everything on the page ##### */
#mainWrapper {
	width: 852px;
	margin-left: auto;
	margin-right: auto;
	border-left: 1px solid black;
	border-right: 1px solid black;	
}

/* ##### wraps main content columns and nav links ##### */
#contentWrapper {
	background: url(background.gif) top left repeat-y;
}
	
/* ##### logo definitions. Width of header leaves room for border pixels ##### */	
#header {
	width: 850px;
	margin-left: auto;
	margin-right: auto;
	border: 1px solid black;
	background-color: #f0f8e0;
}

/* float logo left and tagline right */
#logo {
	padding: 5px 0 5px 5px;
	float: left;
	border: none;
}

#logo p {
	padding-top: 25px;
}

#logo img {
	border: none;
	margin-left: 10px;
}

#logo  a:link { text-decoration:none;border: none; }
#logo  a:visited { text-decoration:none;border: none; }
#logo  a:hover { text-decoration:none;border: none; } 	
#logo a:active { text-decoration:none;border: none; }


/* style defn's for each piece of the logo and header */
#coelo {
	font-size: 3em;
	color: #442200;	
}

#company {
	color: black;
	font-size: 2em;
}

#ofdesign {
	font-size: 2em;	
	color: #442200;	
} 

#mspartner {
	font-size: 0.7em; /* smaller font size for Microsoft partner wording */
	color: #442200;	
}


#tagline {
	float: right;
	text-align: right;
	width: 300px;
	font-size: 1em;
}

#tagline p {
	margin-right: 10px;
	margin-top: 20px;
	padding: 0;
}


/* ##### style defn's for top navigation links ##### */
#menuWrapper {
	width: 830px; /* leave room for padding */
	padding: 10px;
	float: right;
	text-align: right;
	font-size: 1em;
	border-bottom: 2px solid black;
	background: #f7f6f4;
	font-weight: bold;
}

/* horizontal spacing between nav links */
.navspacer {
	display: inline;
	margin-left: 10px;
	padding-right: 10px;
}

/* ##### sidebar 1 styles ##### */
#sidebar1 {
	padding-left: 10px;
	padding-right: 10px;	
	padding-top: 10px;
	padding-bottom: 15px;
	margin: 0;
	float: left;
	width: 228px; /* leave space for borders */
}

#sidebar1 p {
	border-bottom: 1px solid black;
	line-height: 150%;
	padding-bottom: 15px;
}

#sidebar1 img {
	border: 1px solid black;
	margin-bottom: 15px;
}


/* ##### center column styles ##### */
#centercol {
	padding-left: 10px;
	padding-right: 10px;	
	padding-top: 10px;
	padding-bottom: 0;
	margin: 0;
	float: left;
	width: 332px; /* leave space for borders */
}

#centercol p {
	margin-top: 0;
	padding-top: 0;
}

/* ##### sidebar 2 styles ##### */
#sidebar2 {
	padding-left: 10px;
	padding-right: 10px;	
	padding-top: 10px;
	padding-bottom: 0;
	margin: 0;
	float: right;
	width: 228px; /* leave space for borders */	
}

#sidebar2 p {
	padding: 0;
	margin: 0 0 10px 0;
}

#sidebar2 img {
	border: 2px solid white;
}

#sidebar2 h4 {
	padding: 0;
	margin: 0 0 10px 0;
}

#sidebar2 h5 {
	padding: 0;
	margin-left: 10px;
	list-style:  none;
}

	
/* used to make sure floated containers wrap their content properly */
.spacer {
	clear: both;
	height: 1px;
	margin: 0;
	padding: 0;
}

/* styled box for feature articles */
.featureBox {
/*	width: 310px;*/
	padding-top: 0;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;
	margin: 0 0 10px 0;
	background: #f0f8e0;
	border: 1px solid black;
}

/* horizontal divider between articles */
.divbar {
	width: 125px;
	height: 1px;
	border-top: 1px solid black;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 15px;
	margin-top: 15px;
	padding: 0;
}

/* different styles and font for headers to set them apart */
h1, h2, h3 {
	font-family: Arial, Helvetica, sans-serif;
}
	
h1 {
	color: black;
	font-size: 2em;
	margin: 0 0 10px 0;
	padding: 10px;
	background-color: #f7f6f4;
	border: 1px solid black;
}	
	
h2 {
	color: black;
	font-size: 1.5em;
	margin-top: 15px;
	margin-bottom: 0;
	padding: 0;
}

h3 {
	color: black;
	font-size: 1.2em;
	margin: 0;
	padding: 0;
}

/* used for customer quotes */
h4 {
	font-weight: bold;
	font-style: italic;
	font-size: 1em;
	padding: 0;
	margin: 0;
}

/* attribution of customer quotes */
h5 {
	font-weight: normal;
	font-style: normal;
	font-size: 1em;
	margin: 0 0 0 10px;
	padding: 0;
}

/* used for taglines in customer quotes */
h6 {
	font-weight: normal;
	font-style: italic;
	font-size: 1.2em;
	margin: 0 0 10px 0;
}

/* ensure emphasized text loooks bold and italic */
em {
	font-weight: bold;
	font-style: italic;
}

/* ##### footer style section ##### */
#footer {
	clear: both;
	background-color: #BBC1AE;
	font-size: 0.8em;
	margin: 0;
	text-align: right;
	border-top: 1px solid black;
	border-bottom: 1px solid black;	
}

#footer p {
	padding: 10px;
	margin: 0; 
}

/* ##### used for all lists ##### */	
ul {
	padding: 0;
	margin: 0;
}

ul li {
	padding: 0;
	margin: 0 0 5px 15px;
}

/* ##### contact form styles ##### */
#contactForm, legend {
	color: #442200;
}	

#nameField, #emailField, #subjectField, #messageField{
	width: 200px;
}

.clear {
	clear: both;
}

.imageBorder {
	border: 1px solid black;
	padding: 5px;
}
