/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
                                                  margin: 0;
                                                  padding: 0;
                                                  border: 0;
                                                  outline: 0;
                                                  font-size: 100%;
                                                  vertical-align: baseline;
                                                  background: transparent;
                                                  }
body {
       line-height: 1;
       }
ol, ul {
         list-style: none;
         }
blockquote, q {
                quotes: none;
                }
blockquote:before, blockquote:after,
q:before, q:after {
                    content: '';
                    content: none;
                    }

/* remember to define focus styles! */
:focus {
         outline: 0;
         }

/* remember to highlight inserts somehow! */
ins {
      text-decoration: none;
      }
del {
      text-decoration: line-through;
      }

/* tables still need 'cellspacing="0"' in the markup */
table {
        border-collapse: collapse;
        border-spacing: 0;
        }
/* end of reset
   ************ */

@font-face{
  font-family: 'Philosopher';
  src: url('fonts/philosopher-webfont.eot?'),
  url('fonts/philosopher-webfont.woff') format('woff'),
  url('fonts/philosopher-webfont.ttf') format('truetype'),
  url('fonts/philosopher-webfont.svg#webfont') format('svg');
}

html, body {
             height: 100%;
             }

body {
       background: url(bg.png) 0 0 repeat-x;
       font-family: "Arial", "Liberation Sans", "Helvetica Neue", "Helvetica", sans-serif;
       color: #4d4d4d;
       font-size: 13px;
       }

.wrapper {
           min-height: 100%;
           height: auto !important;
           height: 100%;
           margin: 0 auto -156px;
           background: url(wrapper.png) top center no-repeat;
           }
.footer, .push {
                 height: 156px;
                 }
/* header */

.header {
          width: 880px;
          height: 145px;
          margin: 0 auto;
          position: relative;
          }

.header h1 a {
               display: block;
               width: 116px;
               height: 40px;
               position: absolute;
               left: 0;
               top: 76px;
               overflow: hidden;
               text-indent: -3000px;
               }
.header .top_nav {
                   height: 45px;
                   position: absolute;
                   left: 0;
                   top: 0;
                   z-index: 20;
                   }
.header .top_nav li {
                      float: left;
                      padding-right: 27px;
                      }
.header .top_nav li a {
                        float: left;
                        display: block;
                        height: 45px;
                        line-height: 45px;
                        text-decoration: none;
                        color: #ffffff;
                        font-family: "Philosopher", "Arial", "Liberation Sans", "Helvetica Neue", "Helvetica", sans-serif;
                        font-size: 18px;
                        text-shadow: #015D95 1px 1px 0px;
                        }
.header #nav_light {
                     position: absolute;
                     width: 90px;
                     height: 45px;
                     z-index: 10;
                     background: url(light.png) 0 0 no-repeat;
                     }
/* main */

.main {
        width: 880px;
        margin: 0 auto;
        padding-top: 5px;
        padding-bottom: 30px;
        overflow: hidden;
        position: relative;
        }
.main h2 {
           font-family: "Philosopher", "Arial", "Liberation Sans", "Helvetica Neue", "Helvetica", sans-serif;
           font-size: 28px;
           font-weight: normal;
           text-align: center;
           color: #007bc6;
           margin-bottom: 1em;
           }
.main h2 span {
                display: block;
                color: #808080;
                font-size: 16px;
                position:relative;
                top: -2px;
                }
#home .main h2 {
                 margin-bottom: 10px;
                 }
.main h3 {
           font-family: "Philosopher", "Arial", "Liberation Sans", "Helvetica Neue", "Helvetica", sans-serif;
           font-size: 24px;
           font-weight: normal;
           text-align: center;
           color: #007bc6;
           margin-bottom: 1em;
           height: 83px;
           line-height: 80px;
           background: url(hometitle.png) top center no-repeat;
           margin: 0.5em 0;
           }

.main h4 {
           font-family: "Philosopher", "Arial", "Liberation Sans", "Helvetica Neue", "Helvetica", sans-serif;
           font-size: 23px;
           font-weight: normal;
           text-align: center;
           color: #007bc6;
           margin-bottom: 1em;
           background: url(h4.png) bottom center no-repeat;
           margin-bottom: 0.5em;
           line-height: 1.2em;
           }
.main h4 a {
             text-decoration: none;
             color: #007bc6;
             }
#home .main h4 {
                 background: none;
                 margin-bottom: 0;
                 }
.main table a,
.main dl a,
.main ul a,
.main ol a,
.main p a {
            color: #000000;
            text-decoration: none;
            border-bottom: 1px dotted #000000;
            padding: 0 1px;
            }
.main table a:hover,
.main dl a:hover,
.main ul a:hover,
.main ol a:hover,
.main p a:hover {
                  border-bottom: 1px solid #999999;
                  background: #dddddd;
                  }
.main p {
          line-height: 1.3em;
          margin: 1em 0;
          }
.side ul,
.main ul {
           list-style: disc;
           padding-left: 2em;
           line-height: 1.3em;
           margin: 1em 0;
           }
.main ol {
           list-style: decimal;
           padding-left: 2em;
           line-height: 1.3em;
           margin: 1em 0;
           }
.side ul li,
.main li {
           margin: 0.5em;
           }

.main .intro {
               width: 880px;
               height: 200px;
               position: relative;
               }
.main .intro ul {
                  margin: 0;
                  padding: 0;
                  list-style: none;
                  position: absolute;
                  top: 0;
                  left: 0;
                  width: 880px;
                  height: 200px;
                  }
.main .intro ul li {
                     width: 880px;
                     height: 200px;
                     position: absolute;
                     top: 0;
                     left: 0;
                     margin: 0;
                     padding: 0;
                     }
.main .intro ul li a {
                       border: none;
                       background: transparent;
                       display: block;
                       }
.main .intro ul li img {
                           display: block;
                           }
.main .project-img {
                     width: 428px;
                     display: block;
                     height: 118px;
                     overflow: hidden;
                     border: 1px solid #adb3b5;
                     position: relative;
                     text-decoration: none;
                    }
.main .project-img img {
                         position: absolute;
                         top: 0;
                         left: 0;
                         width: 428px;
                         }
.main .project-img .description {
                                  position: absolute;
                                  top: 0px;
                                  left: 0;
                                  width: 408px;
                                  text-align: center;
                                  background: url(semiblack.png) 0 0 repeat;
                                  padding: 8px 10px;
                                  }
.main .project-img .description .title {
                                         display: block;
                                         font-family: "Philosopher", "Arial", "Liberation Sans", "Helvetica Neue", "Helvetica", sans-serif;
                                         color: #ffffff;
                                         font-size: 22px;
                                         }
.main .project-img .description .date {
                                        display: block;
                                        font-family: "Philosopher", "Arial", "Liberation Sans", "Helvetica Neue", "Helvetica", sans-serif;
                                        color: #b3b3b3;
                                        font-size: 18px;
                                         }
.main .index-projects {
                        overflow: hidden;
                        }
.main .index-projects .project-img {
                                     float: left;
                                     margin-right: 20px;
                                     margin-bottom: 20px;
                                     }
.main .index-projects .project-img-even {
                                          margin-right: 0;
                                          }

.main .portfolio-item {
                        overflow: hidden;
                        padding-bottom: 20px;
                        }

.main .portfolio-item  .project-img {
                                      float: right;
                                      }
.main .portfolio-item-mirror  .project-img {
                                             float: left;
                                             }


.main .portfolio-item  .project-description {
                                              width: 430px;
                                              position: relative;
                                              float: left;
                                              height: 120px;
                                              }
.main .portfolio-item  .project-description-2 {
                                                position: relative;
                                                /* top: -15px; */
                                                height: auto;
                                              }
.main .portfolio-item-mirror  .project-description {
                                                     float: right;
                                                     height: auto;
                                                     padding: 0;
                                                     position: relative;
                                                     top: -15px;
                                                     }
.main .portfolio-item  .project-description .date {
                                                    float: right;
                                                    }
.main .portfolio-item  .project-description .date span {
                                                         color: #007bc6;
                                                         }
.main #prev-project {
                      display: block;
                      width: 70px;
                      height: 40px;
                      padding-left: 40px;
                      text-align: right;
                      overflow: hidden;
                      position: absolute;
                      top: 5px;
                      left: 0;
                      background: url(back.png) -10px top no-repeat;
                      color: #999999;
                      text-decoration: none;
                      padding-top: 7px;
                      }
.main #next-project {
                      display: block;
                      width: 70px;
                      padding-right: 40px;
                      height: 40px;
                      overflow: hidden;
                      position: absolute;
                      top: 5px;
                      right: 0;
                      background: url(forward.png) 70px top no-repeat;
                      color: #999999;
                      text-decoration: none;
                      padding-top: 7px;
                      }
.main .portfolio-item  dl {
                            overflow: hidden;
                            line-height: 1.35em;
                            }
.main .portfolio-item  dl dt {
                               color: #007bc6;
                               float: left;
                               padding-right: 5px;
                               }
.main .portfolio-item .more-image {
                                    width: 430px;
                                    position: absolute;
                                    right: 0px;
                                    text-align: left;
                                    top: 194px;
                                    }
.main .portfolio-item .more-image span {
                                         display: block;
                                         float: left;
                                         line-height: 16px;
                                         font-size: 11px;
                                         color: #999999;
                                         }
.main .portfolio-item .more-image ul {
                                       margin: 0;
                                       padding: 0;
                                       list-style: none;
                                       float: right;
                                       }
.main .portfolio-item .more-image ul li {
                                          margin: 0;
                                          float: left;
                                          padding: 0;
                                          }
.main .portfolio-item .more-image ul li a {
                                            display: block;
                                            height: 16px;
                                            line-height: 16px;
                                            width: 14px;
                                            text-align: center;
                                            /* border-left: 1px solid #dddddd; */
                                            border-bottom: none;
                                            color: #999999;
                                            font-size: 11px;
                                            }
.main .portfolio-item .more-image ul li a:hover {
                                                  color: #000000;
                                                  }


.main .clients {
                 overflow: hidden;
                 padding-top: 20px;
                 }

.main .clients .logos {
                        height: 63px;
                        background: url(hometitle.png) top center no-repeat;
                        padding-top: 20px;
                        text-align: center;
                        margin-top: -5px;
                        list-style: none;
                        padding-left: 0;
                        margin-bottom: 0;
                        }
.main .clients .logos li {
                           display: inline;
                           }
.main .clients .logos img {
                            padding: 0 15px;
                            }
.main .clients h4 {
                    font-family: "Philosopher", "Arial", "Liberation Sans", "Helvetica Neue", "Helvetica", sans-serif;
                    color: #007bc6;
                    font-weight: normal;
                    font-size: 20px;
                    text-align: center;
                    }

.main .service {
                 width: 430px;
                 float: left;
                 height: 210px;
                 }
.main .service-even {
                      float: right;
                      }
.main .service .img {
                      float: right;
                      }
.main .service h4 {
                    width: 300px;
                    margin-bottom: 1em;
                    }
.main .request {
                 width: 430px;
                 float: left;
                 }
.main .map {
             width: 430px;
             float: right;
             }
#map {
       width: 430px;
       height: 300px;
       }
/* form */
.main fieldset p {
                   line-height: 22px;
                   margin: 6px 0;
                   position: relative;
                   }
.main fieldset p input.text {
                              height: 22px;
                              width: 210px;
                              background: url(input.png) 0 0 no-repeat;
                              border: none;
                              text-indent: 5px;
                              }
.main fieldset p textarea {
                            width: 420px;
                            height: 100px;
                            border: none;
                            background: url(textarea.png) 0 0 no-repeat;
                            padding: 5px;
                            }
.main fieldset p select {
                          width: 430px;
                          height: 22px;
                          border: none;
                          background: url(select.png) 0 0 no-repeat;
                          padding: 2px 0;
                          }
.main fieldset p label {
                         position: absolute;
                         line-height: 22px;
                         left: 7px;
                         top: 0;
                         cursor: text;
                         }
.main fieldset p input.submit {
                                color: #ffffff;
                                border: none;
                                background: url(submit.png) 0 0 no-repeat;
                                width: 100px;
                                height: 22px;
                                text-align: center;
                                }
.main ul.faq {
               overflow: hidden;
               padding: 0;
               list-style: none;
               margin-bottom: 2em;
               }
.main ul.faq li {
                  width: 440px;
                  float: left;
                  margin: 5px 0;
                  text-align: center;
                  }
.main .totop {
               overflow: hidden;
               }
.main .totop a {
                 display: block;
                 width: 24px;
                 height: 24px;
                 overflow: hidden;
                 background: url(top.png) 0 0 no-repeat !important;
                 float: right;
                 text-indent: -3000px;
                 border: none !important;
                 }
.main ul.refs {
                overflow: hidden;
                width: 900px;
                padding: 0;
                list-style: none;
                }
.main ul.refs li {
                   width: 298px;
                   float: left;
                   margin: 0;
                   padding-bottom: 20px;
                   }
.main ul.refs li a {
                     display: block;
                     float: left;
                     border: 1px solid #adb3b5;
                     }
/* footer */
.footer {
          background: url(footer.png) 0 0 repeat-x;
          }
.footer .inner {
                 width: 880px;
                 height: 156px;
                 padding: 0 40px;
                 background: url(foot.png) top center no-repeat;
                 margin: 0 auto;
                 }
.footer .foot_nav {
                    padding-top: 30px;
                    overflow: hidden;
                    padding-bottom: 15px;
                    }
.footer .foot_nav li {
                       float: left;
                       padding-right: 12px;
                       }
.footer .foot_nav li a {
                         float: left;
                        color: #ffffff;
                         text-decoration: none;
                        font-family: "Philosopher", "Arial", "Liberation Sans", "Helvetica Neue", "Helvetica", sans-serif;
                        font-size: 17px;
                        text-shadow: #000000 1px 1px 0px;
                         }
.footer dl {
             background: url(dl.png) 13px 0 repeat-y;
             overflow: hidden;
             position: relative;
             left: -13px;
             line-height: 1.25em;
             padding: 1px 0;
             }
.footer dl dt {
                color: #666666;
                float: left;
                width: 19px;
                }
.footer dl dd {
                color: #cccccc;
                }
.footer dl dd a {
                  color: #cccccc;
                  text-decoration: none;
                  }
.footer dl dd a:hover {
                        text-decoration: underline;
                        }