@charset "utf-8"; /* CSS Document */ /* begin global reset ======================== */ html, body { height: 100%; } html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, code, img, dl, dt, dd, ol, ul, li, form, fieldset, input, label, legend, textarea, table, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; } h1,h2,h3,h4,h5,h6 { font-size: 100%; font-weight: normal; } h1 img, h2 img, h3 img, h4 img, h5 img, h6 img { margin: 0; } table { border-collapse: separate; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } fieldset, img { border: 0; } img { display: block; } hr { display:block; background:black; color:black; width:100%; height:1px; border:none; margin: 0 0 1.45em; } label { font-weight: bold; } /* legend { left: -9999px; position: absolute; font-size: 0; height: 0; } */ /* begin misc styles ===================== */ .floatleft { float: left; } .floatright { float: right; } .clear { clear: both; display: block; font-size: 0%; height: 0px; line-height: 0px; margin: 0; padding: 0; } /* to stop floating elements in parent div from breaking boundary of parent div */ :focus { outline: none; }/*Removes annoying outline around links in Firefox*/ /* end misc styles ===================== */ /* end global reset ======================== */ /* parent element must be set to 100% height, too, Set to 100% */ body, html { height: 100%; /* needed for container min-height */ background: #5d3200; font: 13px/1.5 'Segoe UI', Segoe, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: small; /* for IE */ *font: x-small; /* for IE in quirks mode */ color: #795230; overflow-x: hidden; overflow-y: auto; } h1 { color: #795230; font-size: 1.6em; font-weight: bold; margin-bottom: 8px; text-shadow: #fff -1px 1px 0px; } h2 { color: #795230; font-size: 1.15em; font-weight: bold; margin: 4px 0; text-shadow: #fff -1px 1px 0px; } p { line-height:1.15em; margin: 0 0 8px 0; } a { color: #333366; } fieldset { } label { display: inline-block; width: 70px; } input[type="text"], input[type="password"] { width: 307px; padding: 3px; border: 1px solid #795230; font: normal 13px 'Segoe UI', Segoe, 'Helvetica Neue', Helvetica, Arial, sans-serif; } input[type="submit"], input[type="reset"] { font: bold 13px 'Segoe UI', Segoe, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: small; /* for IE */ *font: x-small; /* for IE in quirks mode */ text-shadow: #fff -1px 1px 0px; padding: 0px 6px; color: #333; } form#contactusForm, form#myForm { width: 390px; margin: 36px auto; position: relative; left: -25px; } div#container { position:relative; /* needed for footer positioning*/ margin:0 auto; /* center, not in IE5 */ width:1020px; background: -48px url(../images/bg-content.png) repeat-y; height:auto !important; /* real browsers */ height:100%; /* IE6: treaded as min-height*/ min-height:100%; /* real browsers */ } div#header { border: 1px solid #666; background: #666; /* for non-css3 browsers */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000'); /* for IE */ background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000)); /* for webkit browsers */ background: -moz-linear-gradient(top, #666, #000); /* for firefox 3.6+ */ height: 52px; } div.headerWrap { } div.logoDiv { position: relative; float: left; width: 168px; } div.logoDiv a { background: 0 50% url(../images/logo-ngage.png) no-repeat; display: inline-block; cursor: pointer; width: 168px; height: 46px; } div.menuDiv { position: relative; float: right; width: 603px; height: 46px; padding-top: 4px; background: 0 50% url(../images/bg-menu.png) no-repeat; margin-right: 24px; } a.linkHome, a.linkAbout, a.linkWhy, a.linkDemo, a.linkInquiries, a.linkMy { display: inline-block; cursor: pointer; height: 46px; } a.linkHome:hover, a.linkAbout:hover, a.linkWhy:hover, a.linkDemo:hover, a.linkInquiries:hover, a.linkMy { background-color: rgba (255, 255, 255, 0.3); } a.linkHome { width: 65px; margin-right: 10px; } a.linkAbout { width: 125px; margin-right: 10px; } a.linkWhy { width: 110px; margin-right: 10px; } a.linkDemo { width: 60px; margin-right: 10px; } a.linkInquiries { width: 76px; margin-right: 10px; } a.linkMy { width: 110px; } div#content { padding-bottom: .15em; /* bottom padding for footer */ } div.navWrap { width: 1020px; margin: 0 auto; } div.padWrap { padding: 6px 12px 0 24px; } div.contentLeft { position: relative; float: left; width: 660px; padding-bottom: .5em; } div.contentRight { position: relative; float: left; width: 360px; padding-bottom: .25em; color: #330000; } div.contentRight h1 { color: #330000; text-shadow: #fff -1px 1px 1px; } div.homeBullets { background: 0 38% url(../images/img-kiosk.png) no-repeat; padding-left: 144px; min-height: 270px; } div.homeBullets ul { font-size: 1.35em; } div.homeBullets ul li { list-style-image: url(../images/bullet-08.png); height: 32px; padding-left: 6px; } a.linkSee { display: inline-block; cursor: pointer; background: url(../images/btn-benefits.png) no-repeat; width: 158px; height: 28px; } a.linkKnow { display: inline-block; cursor: pointer; background: url(../images/btn-know-about.png) no-repeat; width: 158px; height: 28px; } p.aboutFeature { padding: 12px; border: 1px solid #5D3200; background: #FFFFCC; } div.photoInquiries { margin: 36px auto 12px auto; width: 100%; height: 319px; background: 50% top url(../images/img-inquiries.png) no-repeat; } div.photoAboutTop { margin: 0 auto; width: 350px; height: 235px; background: 50% top url(../images/bg-about-touch.png) no-repeat; } div.photoAboutMiddle { margin: -56px auto 0 auto; width: 350px; height: 235px; background: 50% top url(../images/bg-about-kiosk.png) no-repeat; z-index: 100; position: relative; } div.photoAboutBottom { margin: -56px auto 0 auto; width: 350px; height: 235px; background: 50% top url(../images/bg-about-tennis.png) no-repeat; z-index: 90; position: relative; } div.photoWhy { margin: 0 auto 12px auto; width: 350px; height: 670px; background: 50% 0 url(../images/img-why-3-sm.png) no-repeat; } div.photoMyTop { margin: 0 auto; width: 350px; height: 235px; background: 50% top url(../images/bg-why-woman.png) no-repeat; } div.photoMyMiddle { margin: -44px auto 0 auto; width: 350px; height: 235px; background: 50% top url(../images/bg-my-apt.png) no-repeat; z-index: 100; position: relative; } div.ribbonWrap { padding: 10px 12px 0 0; } div.ribbonContainer { width: 340px; height: 120px; background: url(../images/bg-ribbon.png) no-repeat; padding-top: 3px; } div.ribbonContainer h3 { font-weight: bold; font-size: 19px; margin-bottom: 4px; } a.ribbonContainerAbout, a.ribbonContainerWhy, a.ribbonContainerDemo, a.ribbonContainerInquiries { display: block; color: #fff; text-shadow: #000 -1px 1px 1px; cursor: pointer; text-decoration: none; width: 150px; height: 103px; padding: 6px 0 0 155px; overflow: hidden; } a.ribbonContainerAbout { background: 0 50% url(../images/bg-about.png) no-repeat; } a.ribbonContainerWhy { background: 0 50% url(../images/bg-why.png) no-repeat; } a.ribbonContainerDemo { background: 0 50% url(../images/bg-demo.png) no-repeat; } a.ribbonContainerInquiries { background: 0 50% url(../images/bg-inquiries.png) no-repeat; } p.socialIcons { text-align: left; margin: 0 0 0 12px; } p.socialIcons img { display: inline-block; } div.demoScreenshot { margin: 24px auto; text-align: center; width: 218px; } div.demoScreenshot img { padding: 3px; background: #fff; border: 1px solid #795230; } div#footer { background: #666; /* for non-css3 browsers */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666'); /* for IE */ background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#666)); /* for webkit browsers */ background: -moz-linear-gradient(top, #000, #666); /* for firefox 3.6+ */ width: 100%; position: absolute; bottom: 0; /* stick to bottom */ } div#footer p { padding: 3px; margin: 0; text-align: center; color: #fff; text-shadow: #000 -1px 1px 0px; font-size: 11px; }