/* reset - standardize html tag styles across all browsers */
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, 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;}
caption, th, td {text-align: left; font-weight: normal;}
input, textarea, select {font-family: Sans-Serif; font-size: inherit; font-weight: inherit;}
input:focus { outline: none; }
/* function classes ****************************** */
.leftIt {text-align: left;} /* left align */
.rightIt {text-align: right;} /* right align */
.centerIt {text-align: center;} /* center align */
.boldIt {font-weight: bold;}
.clearIt {clear: both; margin: 0; padding: 0;} /* used to clear floats near bottom of holder div */
.clearfix:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
.clearfix {display:inline-block;}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */
html {height: 101%;}
body {
background: #fff;
font-family: "Trebuchet MS", Trebuchet, Arial, sans-serif;
font-size: 14px;
color: #222;
width: 100%;
}
a {color: #222;}
a:hover {color: #749A9A;}
.about #container #main h1 {background: url(../images/titles/aboutus.jpg) no-repeat; }
.services #container #main h1 {background: url(../images/titles/services.jpg) no-repeat; }
.portfolio #container #main h1 {background: url(../images/titles/portfolio.jpg) no-repeat; }
.contact #container #main h1 {background: url(../images/titles/contactus.jpg) no-repeat; }
.login #container #main h1 {background: url(../images/titles/login.jpg) no-repeat; }
.about #container #topnav .about a, .services #container #topnav .services a, .portfolio #container #topnav .portfolio a, .contact #container #topnav .contact a, .login #container #topnav .login a {color: #749A9A;}
#container {width: 959px; margin: 10px auto; padding: 10px 0 20px 0;}
#header {height: 87px;}
#header h2#logo a {float: left; display: block; text-decoration: none; width: 260px; height: 70px; background: url(../images/logo.gif) no-repeat; margin: 0 0 0 10px; padding: 0; text-indent: -2000em; z-index: 1000;}
/*#header #topnav {float: right; padding: 20px 0 20px 5px;}
#header #topnav li {text-transform: lowercase; list-style: none; display: inline; padding: 5px 23px; border-right: solid 1px #729292;}
#header #topnav li a {list-style: none; display: inline; text-decoration: none; font-weight: normal;}
#header #topnav li a:hover {text-decoration: underline;}
#header #topnav .last {border: none;}*/
#main {height: 118px; background: #222 url(../images/bg_main.jpg);}
#main h1 {float: left; display: block; text-decoration: none; width: 260px; height: 70px; margin: 36px 0 0 32px; padding: 0; text-indent: -2000em; z-index: 1000;}
#secondary {min-height: 400px; background: #E3E8E8 url(../images/bg_secondary_top.jpg) no-repeat;}
#secondary #content {min-height: 400px; width: 510px; float: left; margin: 15px 0 0 30px; padding: 15px 30px 0 0; border-right: solid 1px #CCD7D7;}
#secondary h3 {margin: 15px 0 0 0; color: #3F4E4E; font-size: 17px;}
#secondary p {margin: 0 0 5px 0; color: #222; font-size: 14px;}
#secondary ul {margin: 10px 0 10px 20px; color: #222; font-size: 14px;}
#secondary #sidebar {height: 400px; width: 325px; float: right; margin: 10px 30px 0 30px; padding-top: 15px;}
#footer {color: #fff; height: 204px; background: #222 url(../images/bg_footer.jpg);}
#footer #footerleft {float: left; width: 540px; padding: 81px 0 0 30px;}
#footernav {}
#footernav li {text-transform: lowercase; list-style: none; display: inline; padding: 0 10px; border-right: solid 1px #707E7E;}
#footernav li a {list-style: none; display: inline; text-decoration: none; font-weight: normal;}
#footernav li a:hover {text-decoration: underline;}
#footernav .first {padding-left: 0;}
#footernav .last {border: none;}
#footer #footerleft a {color: #fff; text-decoration: none;}
#footer #footerleft a:hover {text-decoration: underline;}
#footer #footerleft #footercopy {padding: 32px 0 0 0; font-size: 12px;}
#footer #footerright {float: right; width: 355px; padding: 35px 0 0 0; font-size: 13px; line-height: 1.25}
#footer #footerright h4 {font-size: 15px;}
/* elements */
#portfolio {margin-top: 10px;}
.icon48 {float: left; height: 48px; width: 48px; border: solid 1px #729292; margin: 2px 10px 0 0;}
a .icon48:hover {border: solid 1px #222;}
.icon100 {height: 98px; width: 98px; border: solid 1px #729292; margin: 15px 20px 0 0;}
.icon100:hover {border: solid 1px #222;}
.icon48contact {float: left; height: 48px; width: 48px; border: solid 1px #729292; margin: 15px 10px 100px 0;}
.more {margin: 15px 0 5px 0;}
.more a {letter-spacing: -0.25px; color: #222; font-weight: bold; text-decoration: none; font-size: 16px; text-transform: uppercase;}
.more a:hover {text-decoration: underline;}
#sidebar .more a {font-size: 14px; letter-spacing: -0.1px;}
#sidebar h3 {margin-top: 0;}
/* about */
.principalname {float: left; margin: 4px 30px 2px 0;}
.jobtitle {*width: 250px; margin: 2px 0 2px 0 !important;}
/* titles */
.swap {text-indent: -2000em; z-index: 1000;}
#ourcompanytitle {width: 242px; height: 39px; margin: 0 0 10px 0; padding: 0; background: url(../images/titles/ourcompany.gif) no-repeat;}
#ourtechtitle {width: 216px; height: 29px; margin: 20px 0 0 0; padding: 0; background: url(../images/titles/ourtech.gif) no-repeat;}
#coreservicestitle {width: 230px; height: 31px; margin: 0 0 15px 0; padding: 0; background: url(../images/titles/coreservices.gif) no-repeat;}
#otherservicestitle {width: 182px; height: 24px; margin: 15px 0 15px 0; padding: 0; background: url(../images/titles/otherservices.gif) no-repeat;}
#recentworktitle {width: 218px; height: 31px; margin: 0 0 5px 0; padding: 0; background: url(../images/titles/recentwork.gif) no-repeat;}
#featuredprojectstitle {width: 216px; height: 29px; margin: 15px 0 15px 0; padding: 0; background: url(../images/titles/featuredprojects.gif) no-repeat;}
#contactinfotitle {width: 213px; height: 32px; margin: 0 0 15px 0; padding: 0; background: url(../images/titles/contactinfo.gif) no-repeat;}
#requestquotetitle {width: 208px; height: 29px; margin: 15px 0 8px 0; padding: 0; background: url(../images/titles/requestquote.gif) no-repeat;}
/* menu */
#header #topnav {float: right; padding: 17px 21px 20px 0;}
#header #topnav ul {display: inline; list-style: none; width: 600px; margin: 0; height: 31px; top: 0; padding: 0;}
#header #topnav ul li {margin: 0; padding: 0; float: left; height: 30px; display: inline; list-style: none;}
#header #topnav ul li a {height: 30px; display: block; outline: none; text-indent: -9999px;}
#header #topnav ul li a:hover {background-position: 0 -30px !important;}
#header #topnav ul #about a {background: url(../images/nav/about.gif) no-repeat 0 0; width: 65px;}
#header #topnav ul #services a {background: url(../images/nav/services.gif) no-repeat 0 0; width: 100px;}
#header #topnav ul #clients a {display: none; background: url(../images/nav/clients.gif) no-repeat 0 0; width: 90px;}
#header #topnav ul #folio a {background: url(../images/nav/portfolio.gif) no-repeat 0 0; width: 106px;}
#header #topnav ul #contact a {background: url(../images/nav/contact.gif) no-repeat 0 0; width: 78px;}
.about #header #topnav ul #about a {background-position: 0 -30px;}
.about #header #topnav ul #about a:hover {background-position: 0 -61px !important;}
.services #header #topnav ul #services a {background-position: 0 -30px;}
.services #header #topnav ul #services a:hover {background-position: 0 -61px !important;}
.portfolio #header #topnav ul #folio a {background-position: 0 -30px;}
.portfolio #header #topnav ul #folio a:hover {background-position: 0 -61px !important;}
.contact #header #topnav ul #contact a {background-position: 0 -30px;}
.contact #header #topnav ul #contact a:hover {background-position: 0 -61px !important;}