* { margin: 0; padding: 0; }
body { font: 62.5% Verdana, Arial, sans-serif; text-align: center; }
ul { list-style-type: none; }
a { text-decoration: none; }
a img { border: 0; }
.clear { clear: both; }

.yellow { color: #F7C32F; }

#wrapper {
  width: 793px;
  margin: 0 auto;
  text-align: left;
  border: 1px #ccc solid;
}

#masthead {
  height: 157px;
  background: transparent url(../i/masthead.gif) no-repeat top center;
  margin-bottom: 6px;
}

#left-nav {
  float: left;
  width: 157px;
  background-color: #E9EAEA;
  padding: 13px 0;
  text-align: right;
}
ul#main-nav {padding-left: 10px;}
ul#main-nav li {margin-bottom: 3px;border: #ccc 1px solid;}
ul#main-nav li a {
  display:block;
  text-align: left;
  background-color: #ccc;
  border-left: 6px #4d4d4d solid;
  padding: 4px 4px 4px 20px; 
  color: #505050;
}
ul#main-nav li a:hover {
  color: #ccc;
  background-color: #4d4d4d;
  border-left: 6px #999 solid;
}
body#home li#nav-home a, body#about-us li#nav-about-us a, body#projects li#nav-projects a, body#products li#nav-products a, body#services li#nav-services a, body#contact li#nav-contact a  { border-left: 6px #000 solid; background-color: #4d4d4d; color: #fff; }
body#home li#nav-home a:hover, body#about-us li#nav-about-us a:hover, body#projects li#nav-projects a:hover, body#products li#nav-products a:hover, body#services li#nav-services a:hover, body#contact li#nav-contact a:hover { color: #ccc; }


ul#get-in-touch {padding-left: 10px; margin-top: 10em;}
body#services ul#get-in-touch, body#projects ul#get-in-touch { margin-top: 3em; }
#services-menu, #categories-menu { display: none; }
body#services #services-menu, body#projects #categories-menu {
  display: block;
  margin-top: 3em;
}

div.submenu ul {
  padding-left: 25px;
}
div.submenu ul li { margin-bottom: 3px; border: #ccc 1px solid; }
div.submenu li a {
  display:block;
  text-align: left;
  background-color: #ccc;
  border-left: 6px #4d4d4d solid;
  padding: 4px 4px 4px 10px; 
  color: #505050;
}
div.submenu li a:hover {
  color: #ccc;
  background-color: #4d4d4d;
  border-left: 6px #999 solid;
}
div.submenu li.current a { background-color: #F7C32F; }
div.submenu li.current a:hover { background-color: #4d4d4d; color: #fff; border-left: 6px #F7C32F solid; }


ul#get-in-touch a, ul#get-in-touch { color: #4d4d4d; }
ul#get-in-touch li { margin-bottom: 10px; padding: 2px 2px 2px 20px; text-align: left; }
ul#get-in-touch li#get-in-touch-title {
  background-color: #ccc;
  border-left: 6px #4d4d4d solid;
  padding: 4px 4px 4px 20px; 
  color: #505050;
}
ul#get-in-touch li#by-phone {
  background: transparent url(../i/icon_phone.gif) no-repeat 0 1px;
}
ul#get-in-touch li#by-email {
  background: transparent url(../i/icon_email.gif) no-repeat 0 1px;
}
ul#get-in-touch li#by-post {
  background: transparent url(../i/icon_post.gif) no-repeat 0 2px;
}

#content-container {
  float: right;
  width: 634px;
}

#content {
  float: left;
  width: 400px;
  padding: 13px 0;
  color: #4d4d4d;
}
#content h1, #content h2, #content h3, #content h4, #content p, #content ul {
  padding-left: 30px;
  padding-right: 30px;
}

/* Don't forget to also change editor.css when these are changed... >> START >> */
#content img { margin-bottom: 15px; }
#content h1 { color: #000; font-size: 1.8em; font-weight: normal; margin: 0 0 1em 0; }
#content h2 {font-size: 1.3em; font-weight:normal;margin-bottom: 1em;}
#content h3 {font-size: 1.2em; margin-bottom: 0.5em;margin-top: 1.5em;}
#content h4 {}
#content p {font-size: 1.1em; margin-bottom: 1em;  line-height: 1.4em;}
#content a { color: #00A0C6; text-decoration: underline; font-weight: bold; }
#content hr { margin: 15px 0 15px 30px; border:1px #ccc solid; color: #ccc; background-color: #ccc; }
#content ul {  }
#content li { margin-bottom: 0.25em; font-size: 1.2em; padding-left: 10px; background: transparent url(../i/bullet.gif) no-repeat 0 5px; }
/* << END << */

#right-panel {
  float: right;
  width: 221px;
  text-align: center;
  background: transparent url(../i/project_showcase_header.gif) no-repeat top center;
  margin-top: 13px;
  border-left: 1px #ccc dashed;
}

body#projects #content { width: 630px; }
body#projects #right-panel { display: none; }

#project-showcase {
  margin: 0 auto;
  width: 221px;
}
#project-showcase h2 {
  text-align: left;
  padding-left: 32px;
  padding-top: 4px;
  padding-bottom: 4px;
  color: #fff;
  font-size: 1em;
  font-weight: normal;
  text-transform: uppercase;
}
#project-showcase ul {
  margin: 0 auto;
  width: 181px;
}
#project-showcase ul li {
  border-left: 1px #ccc solid;
  border-right: 1px #ccc solid;
  background-color: #F3F3F3;
  margin-bottom: 5px;
}
#project-showcase ul ul { margin: 0; text-align: left; padding-bottom: 3px; }
#project-showcase ul ul li { 
  border: 0; background-color: transparent; clear: both; color: #4d4d4d; 
  margin-bottom: 10px;
}
#project-showcase ul ul li span.label { float: left; width: 35px; font-weight: bold; margin-left: 10px; border-bottom: 1px #999 dashed; padding: 3px 0; font-size: 0.9em; }
#project-showcase ul ul li span.value { float: right; width: 130px; margin-right: 3px;  border-bottom: 1px #999 dashed; padding: 3px 0; font-size: 0.9em; }
#project-showcase a { color: #4d4d4d; }
#view-more-projects { margin-bottom: 1em; }


div.project { 
  margin-bottom: 2em;
  float: left;
  width: 560px; margin-left: 30px; 
  background: #f3f3f3 url(../i/project_header_grey.gif) no-repeat top center;
}
div.alternate-project { background-image: url(../i/project_header_yellow.gif) !important; }
div.project h2 {
  padding-left: 10px !important; 
  padding-top: 3px; color: #fff; text-transform: uppercase; font-size: 1.1em !important; 
  margin-bottom: 5px !important;
}
div.alternate-project h2 { color: #4d4d4d !important; }
div.project div.project-image {
  float: left; width: 280px;
}
div.project div.project-image img { padding: 0 !important;margin: 0 !important;}

div.project-details-container { float: right; width: 275px; }
table.project-details { border-collapse: collapse; width: 100%; }
table.project-details th {padding: 4px; border-bottom: 1px #999 dotted;vertical-align:top;width:25%;line-height: 1.4em;}
table.project-details td {padding: 4px; border-bottom: 1px #999 dotted;vertical-align:top;line-height: 1.4em;}
table.project-details tr.description th,table.project-details tr.description td {border-bottom:0;}

div.project-image-thumbnails { text-align: center !important; }

#bottom-nav {
 margin-top: 1em;
 text-align: left; 
 padding-left: 185px;
 padding-bottom: 10px;
 border-bottom: 18px #F7C32F solid;
}
#bottom-nav ul {text-align:left;}
#bottom-nav li {display:inline;padding: 0 5px;border-left: 1px #a6a6a6 solid;}
#bottom-nav li#bottom-nav-home { border-left: 0;}
#bottom-nav li a {color: #85898a;text-transform: uppercase;font-size:0.8em;}
#bottom-nav li a:hover {}


#footer {
  padding: 10px 0;
  width: 793px;
  margin: 0 auto;
  text-align: left;
  font-size: 0.9em;
  color: #4D4D4D;
}
#footer-left {
  float: left;
  width: 540px;
}
#footer-right {
  float: right;
  text-align: right;
  width: 250px;
}
#footer-left p {margin-bottom: 0.5em;}
#footer-right p {margin-bottom: 0.5em;}

ul#sitemap {  }
ul#sitemap a { color: #4d4d4d; font-size: 12px !important; text-decoration: none; }

.image-popup { cursor: url(../i/magnify.png), url(i/magnify.cur), crosshair; }