html 	{width:100%; }
body	{background:#4E595F /*url('../images/body-bg.gif') repeat-x 0 20px*/; margin:0; padding:0; font-family:"Trebuchet MS", Verdana, Arial, "Times New Roman", serif; font-size:80%; color:#000000; width:100%; }

p		{padding:0 0 15px 0; margin:0; line-height:140%; }
h1		{margin:0; padding:0; font-size:130%; font-weight:normal; }
h2		{margin:0; padding:0 0 20px 0; font-size:140%; font-weight:normal; }


/*link styling*/
a			{color:#000000; text-decoration:underline; }
a:hover		{text-decoration:none; }
#footer a	{color:white /*#637076*/; }


/*structural elements*/
.section 		{text-align:center; width:100%; border-bottom:1px solid #637076 }

#header			{background:#000080 /*#1A292F*/; margin:0 auto; text-align:left; padding:10px 20px 50px 20px; height:70px; width:720px; border-left:0 solid #637076; border-right:0 solid #637076; }
#container		{margin:0 auto; text-align:left; padding:0 20px 20px 20px; width:720px; border-left:1px solid #637076; border-right:1px solid #637076; }
h1#logo			{background:#E8EDF7; float:left; padding:/*5px 20px*/ 37px 20px; width:100px; border:0 solid #FFFFFF; text-align:center; min-height:24px; }
#pictureRail	{tex336t-align:center; }
#menu			{background:#000080 /*#1A292F*/; margin:0 11px 0 10px; border:1px solid #FFFFFF; padding:10px; color:BLACK; text-align:center; }
#content		{background:#E8EDF7; margin:20px 11px 0 10px; padding:20px 20px 5px 20px; border:1px solid white; }
#footer			{margin:0 auto; text-align:left; padding:20px 20px 60px 20px; width:720px; border-left:1px solid #637076; border-right:1px solid #637076; }
#footer p		{background:#000080 /*#1A292F*/; padding:10px; font-size:90%; color: white/*#637076*/; border:1px solid #637076; text-align:center; }


/*section dependant style over-rides*/

#header p	{text-align:center; font-size:190%; color:#E8EDF7; padding:45px 0 0 0; }

ul#menu 	{ }
ul#menu li	{margin:0; padding:0; list-style:none; display:inline; }
ul#menu  a	{color:#FFFFFF; text-decoration:none; padding:10px 15px; }

#pictureRail img	{margin:10px 10px;border:1px solid white;  }
#content img		{border:10px solid #000000; float:right; margin:0 0 20px 20px; }


/*This adds a little arrow under the menu item of the page you are on. (handy for navigation and usability)
To modify, edit the <body> tag by changing the id.
e.g, if the page you are on is the contact page, change: <body id="home"> to <body id="contact">*/
#home #homeLink,
#services #servicesLink,
#expertise #expertiseLink,
#projects #projectsLink,
#products #productsLink,
#about #aboutLink,
#contact #contactLink
{background:url('../images/menu-a-bg.gif') no-repeat center bottom; }


/*just makes sure the content doesn't spill out the boxes, see http://www.positioniseverything.net/easyclearing.html for details*/
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */