/* ============================ RESET ============================== */
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;
vertical-align: baseline;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
:focus {
outline: 0;
}
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

/* ============================ Custom CSS ============================== */
body {
				margin: 0;
				padding: 0;
				height:100%;
				background: #FFF url("../image/bg.png") 0 0 repeat-x;
				font-family: Helvetica, Arial, sans-serif;
				color: #333;
				font-size: 62.5%;
}
html, body {
	height: 100%;
}

img {
				border:none;
}
a {
				text-decoration: none;
				color: #333;
}

p {
				font-size: 13px;
				line-height: 155%;
				margin-bottom: 10px;
}

/*================================ header ===================================*/
#wrapper {
        width: 870px;
        position: relative;
        min-height: 100%;
        height: auto !important;
        height: 100%;
        margin: 0 auto -60px; /* the bottom margin is the negative value of the footer's height */
}
#header {
				position: relative;
				width: auto;
				margin: 0 auto;
				height: 130px;
        background: transparent url(../image/header-bg.png) right 16px no-repeat;
}

#header h1 {
        display:block;
        margin:0 0 12px;
        overflow:hidden;
}

#header #logo {
				float: left;
				display: inline;
				background: transparent url(../image/logo.png) 0 0 no-repeat;
				width: 125px;
				height: 103px;
				margin: 16px 0 0 0;
				text-indent: -999em;
}

#primaryNav {
        /*border-bottom:3px solid #484848;*/
        float:right;
        margin:0;
        width:718px;
        position: absolute;
        right: 0;
        top: 91px;
        height: 28px;
        background: transparent url(../image/primary-nav-arrow.png) -50px bottom no-repeat;
}

#primaryNav li {
        display:inline;
        float:left;
        font-size:15px;
        margin-bottom:7px;
        text-align:center;
}

#primaryNav li a {
        color:#FFFFFF;
        display:block;
        padding:0 20px;
        width:auto;
        border-right:1px solid #484848;
        font-weight: bold;
}

#primaryNav li a.nthChild-7 {
        border-right: none;
}

#primaryNav li a:hover {
				color: #999;
}

/*============================== content ==================================*/
.content {
				position: relative;
				width: 790px;
				margin: 0 auto;
				padding: 40px 40px 70px;
				overflow: hidden;
}

.content h1 {
        color: #333;
        font-size: 35px;
        font-weight: normal;
}

.content h2 {
        color: #076CBD;
        font-size: 55px;
}

#home.content h2 {
        font-size: 90px;
}

.content h3 {
        color: #333;
        font-size: 24px;
        font-weight: normal;
        margin: -5px auto 20px;
}

.content ul.productList, .content ul.itemList {
        color: #333;
        font-size: 13px;
}

.content ul.productList li {
        margin: 0 0 .4em 0;
}

/* =========== services ========================== */
.content ul.servicesList {
        color: #333;
        font-size: 16px;
        margin-left: 85px;
        width: 510px;
}

.content ul.servicesList li {
        margin: .4em 0;
        padding-bottom: .2em;
        border-bottom: 1px solid #ccc;
}

.content ul.servicesList li.electronicEng {
        background: transparent url(../image/arrow-dropdown.png) 165px 2px no-repeat;
}

.content ul.servicesList li.mechanicalEng {
        background: transparent url(../image/arrow-dropdown.png) 336px 2px no-repeat;
}

.content ul.servicesList ul {
        font-size: 13px;
        margin: 10px 0 10px 45px;
        width: auto;
}

.content ul.servicesList ul li {
        margin: .4em 0;
        padding: 0 0 .2em .7em;
        border-bottom: none;
        background: transparent url(../image/bullet.png) 0 6px no-repeat;
}

/* =========== zxPico ========================== */
#zxPico.content h2 {
        background: transparent url(../image/icon-zx-pico.png) 0 0 no-repeat;
        padding: 30px 0 3px 60px;
        
}

#zxPico.content h3 {
        font-size:22px;
        margin: 0;
        padding: 0 0 20px 33px;
        background: transparent url(../image/quotes.png) 0 0 no-repeat;
        line-height: 32px;
}

#zxPico.content sup {
        position: absolute;
        left: 255px;
        top: 70px;
        font-size: 12px;
        width: 18px;
}

#zxPico.content #licenseAgreement {
        height: 200px;
        width: 500px;
        overflow:auto;
        border: 1px solid #ccc;
        padding: 20px;
}
/* =========== company ========================== */
#company #mainContent {
				display: inline;
				float: left;
				position: relative;
				width: 310px;
}

#company #mainContent h3 {
        background: transparent url(../image/company-founder.png) 0 0 no-repeat;
        padding: 150px 30px 0 112px;
        line-height: 135%;
}
#company #sidebar {
				display: inline;
				float: right;
				position: relative;
				width: 415px;
        border-left: 1px solid #ccc;
        margin-top: 28px;
        padding: 0 32px;
}

#company #sidebar h2 {
        font-size: 40px;
        color: #7f7f7f;
        margin-bottom: 20px;
}
#company #sidebar h2.zxTech {
        display:inline;
        float:left;
        margin: 0;
        height: 34px;
        width: 150px;
}
#company #sidebar h3 {
        font-size:24px;
        margin: 10px 0 20px 0;
}

#company #sidebar h2.name {
        margin: 30px 0 0 0;
        font-size: 30px;
}

#company #sidebar h3.title {
        font-size:20px;
        margin-top:0;
}

#company #sidebar ul.productList, #company #sidebar ul.itemList {
        margin-left: 40px;
        margin: 20px 0 20px 40px;
}

/* =========== projects ========================== */
#projects.content {
				padding: 40px 0 70px;
        width: 870px;
}

#projects #mainContent {
				display: inline;
				float: left;
				position: relative;
				width: 272px;
}

#projects #sidebar {
        padding: 0;
        width: 580px;
        margin-top: 0;
        border: none;
}

#projects ul.projectList {
        margin-top: 20px;
        color:#333333;
        font-size:13px;
        width: 247px;
        font-weight: bold;
}

#projects ul.projectList li {
        border-bottom:1px solid #CCCCCC;
        margin:1em 0;
        padding-bottom:0.2em;
        background:url("../image/arrow-dropdown.png") no-repeat scroll right -200px transparent;
        overflow: hidden;
}

#projects ul.projectList li:hover, #projects ul.projectList li.open {
        background:url("../image/arrow-dropdown.png") no-repeat scroll right 0 transparent;
}

#projects #sidebar .projectSummaryTop {
        width: 520px;
        min-height: 440px;
        height: auto !important;
        _height: 475px;
        background: transparent url(../image/project-bg-top.png) 0 0 no-repeat;
        padding: 35px 30px 0 30px;
}

#projects #sidebar .projectSummaryTop h2 {
        font-size: 35px;
        color: #636363;
        height: 125px;
        padding: 20px 0 0 180px;
        border-bottom: 1px solid #636363;
        margin-bottom: 25px;
        background-position: 15px 0;
        background-repeat: no-repeat;
        background-color: transparent;
}

#projects #sidebar li.nthChild-1 .projectSummaryTop h2 {
        background-image: url(../image/icon-lightning.png);
}
#projects #sidebar li.nthChild-2 .projectSummaryTop h2 {
        background-image: url(../image/icon-bus.png);
}
#projects #sidebar li.nthChild-3 .projectSummaryTop h2 {
        background-image: url(../image/icon-satellite.png);
}
#projects #sidebar li.nthChild-4 .projectSummaryTop h2 {
        background-image: url(../image/icon-clock.png);
}

#projects #sidebar .projectSummaryTop p {
        padding: 0 20px;
}

#projects #sidebar .projectSummaryTop p strong{
        font-size: 15px;
        font-weight: bold;
}

#projects #sidebar .projectSummaryBottom {
        width: 580px;
        height: 31px;
        background: transparent url(../image/project-bg-bottom.png) 0 0 no-repeat;
        margin-top: -10px;
}


/*============================== mainContent ==================================*/
#mainContent {
				display: inline;
				float: left;
				position: relative;
				width: 445px;
}

#mainContent ul.productList {
        background:url("../image/curly-bracket-large.png") no-repeat scroll 0 0 transparent;
        padding:20px 0 20px 75px;
        margin-left: -25px;
}


/*=========================== Sidebar ================================*/
#sidebar {
				display: inline;
				float: right;
				position: relative;
				width: 280px;
        border-left: 1px solid #ccc;
        margin-top: 65px;
        padding: 0 32px;
}

#sidebar ul.productList, #sidebar ul.itemList {
        margin-left: 40px;
}

#sidebar ul.productList li {
        padding-left: 15px;
        background: transparent url(../image/arrow.png) 0 3px no-repeat;
}

#sidebar ul.itemList li {
        padding-left: 15px;
        background: transparent url(../image/bullet.png) 0 6px no-repeat;
        margin: 0 0 0.4em;
}

#sidebar .getZxPico {
        margin-top: 30px;
        padding: 30px 0;
        border-top: 1px solid #ccc;
        position: relative;
}

#sidebar .getZxPico h3 {
        position: absolute;
        left: 108px;
        top: 43px;
}

#home #sidebar h2 {
        font-size: 40px;
        color: #7f7f7f;
        padding: 30px 20px 20px 128px;
        background: transparent url(../image/icon-zx-pico.png) 0 0 no-repeat;
        margin-bottom: 20px;
}

#sidebar .getZxPico sup {
        position: absolute;
        right: 20px;
        top: 60px;
        font-size: 12px;
        width: 18px;
}
#sidebar a {
        color: #EB8A00;
        padding-right: 24px;
        background: transparent url(../image/arrow-double.png) right 5px no-repeat;
        font-size: 13px;
}

/*=========================== centeredContent ================================*/
.centeredContent {
				position: relative;
				width: 640px;
        margin: 15px auto;
        padding: 0;
}

.centeredContentInner {
				position: relative;
				width: auto;
        margin: 0;
        padding: 0 40px;
}

.centeredContentInner #contactInfo {
        float: left;
        display: inline;
        width: 210px;
        border-right: 1px solid #ccc;
        padding-right: 20px;
        margin: 0 30px 20px 0;
}

.centeredContentInner #contactInfo p {
        font-size: 15px;
}

.centeredContentInner #contactBlurb {
        float: right;
        display: inline;
        width: 298px;
        margin: 0 0 20px 0;
}

/*================ contact form =====================================*/
form.contactForm {
}

form.contactForm fieldset {
        border-top:1px solid #CCCCCC;
        clear:both;
        margin:2em auto 0;
        padding:2em 0 2em 5em;
}

form.contactForm legend {
        font-size: 16px;
        padding: 0 0.5em;
        font-weight: bold;
        margin-top:1em;
        padding:0 0.5em 1em;
}

form.contactForm label {
        display:block;
        float:left;
        font-size:13px;
        margin-left:-50px;
        text-align:right;
        width:170px;
}

form.contactForm input {
        height: 20px;
}

form.contactForm input, form.contactForm textarea {
        display:block;
        float:left;
        margin: 0 0 20px 10px;
        width:370px;
        border: 1px solid #ccc;
}

form.contactForm label.error {
        color:#EB8A00;
        display:none;
        float:left;
        margin-bottom:20px;
        margin-top:-15px;
        text-transform:uppercase;
        width:555px;
        font-weight: bold;
}

form.contactForm input:focus, form.contactForm textarea:focus {
				border: 1px solid #666;
}

form.contactForm input#submit_btn {
				background: transparent url(../image/submit-button.png) 0 0 no-repeat;
				border:medium none;
				color:#FFFFFF;
				cursor:pointer;
				font-family:Arial,Helvetica,Sans-serif;
				font-size:0;
				height:36px;
				line-height:0;
				margin:0 0 0 373px;
				overflow:hidden;
				padding:0;
				width:130px;
}

form.contactForm input#submit_btn:hover {
				background-position: 0 -50px;
}

form.contactForm input#accept {
        border:none;
        display:block;
        float:left;
        margin:10px;
        width:30px;
}

form.contactForm p.acceptance {
        margin: 10px 0;
}
#message {
        background: url("../image/thank-you-bg.png") no-repeat scroll center 0 transparent;
        height: 64px;
        width: auto;
        padding-top: 8px;
}

#message h3, #message p {
				text-align: center;
				padding: 0;
				margin: 0;
}

#zxPico.content #message {
        padding: 0;
}

#zxPico.content #message h3 {
background: none;
padding: 0;
}

/*================================= Footer =====================================*/
#footerWrapper, .push {
        height: 60px;
}

#footerWrapper {
				width:100%;
				position: relative;
        background: #cbcbcb;
        margin: 0 auto;
}

#footer {
        padding: 10px 0;
        margin: 0 auto;
        height: 40px;
        position: relative;
        width: 870px;
}

#footer #copy {
				margin: 0 auto;
				display: block;
				text-align: center;
        font-size: 10px;
}

#nkWrapper {
				position: absolute;
				top: 20px;
				left: 20px;
}

ul#nk {
				margin:0 auto;
				width:100px;
				height:20px;
				float:left;
				overflow: hidden;
}

ul#nk li{
				display: block;
}

ul#nk li a{
				width:100px;
				display: block;
				text-decoration: none;
				height:20px;
				float:left;
				text-indent: -9999px;
				overflow: hidden;
				background: transparent url("../image/naya-kreative.png") 0 0 no-repeat;
				/*background: transparent url("../image/naya-kreative-inverted.png") 0 0 no-repeat;*/
}

ul#nk li a:hover, ul#nk li a.hover {
				background-position: 0 -20px;
}

#footer #footerNav {
				position: absolute;
				top: 20px;
				right: 20px;
}

#footer #footerNav li {
				float: left;
				display: inline;
				margin: 0 5px;
				font-size: 12px;
}

#footer #footerNav li a {
				color: #333;
}

#footer #footerNav li a:hover {
				color: #000;
				text-decoration: underline;
}

/*=============================== Clear fix ============================================*/
.clear:after {
				content: "."; 
				display: block;
				height: 0; 
				clear: both; 
				visibility: hidden;
				}

.clear {
				display: block;
}

/* Hides from Internet Explorer for the Mac \*/
.clear {
				min-height: 1%;
}

* html .clear {
				height: 1%;
}
/* End hide */