/* --------------------------------- DHAANSW --------------------------------- Palette: Green: #008E7E */ /*-- HTML Elements --*/ * { margin: 0; padding: 0; } html, body { font-size: 100%; } body { font: 62.5%/150% Arial,sans-serif; color: #666; background: #FFF url("/themes/dhaansw/img/bg/splash.jpg") center 53px no-repeat; } p { font-size: 1.2em; line-height: 150%; margin: 0 0 2em 0; } ul, ol { margin: 0.5em 0 1.2em 3.5em; } li { font-size: 1.2em; line-height: 150%; margin-bottom: 1em; } a { color: #008E7E; border-bottom: 1px dotted #97B8B4; text-decoration: none; } a:hover { color: #000; border-bottom: 1px solid #000; } a img, a.img { border: 0 !important; } .s-home a { color: #666; border-bottom: 1px dotted #DFDFDF; } .s-home a:hover { color: #008E7E; border-bottom: 1px solid #008E7E; } blockquote { margin: 0 3em; text-align: justify; } /*-- Global Styles --*/ .clear { clear: both; height: 0; overflow: hidden; } .left { float: left; } .right { float: right; } .hr { height: 0px; border-bottom: 1px solid #C0C0C0; margin-bottom: 1.5em; overflow: hidden; } .hr hr { display: none; } .standout { padding: 10px; font-size: 120%; border-top: 1px solid #008E7E; border-bottom: 1px solid #008E7E; background: #8FCDC6; color: #fff; text-shadow: 1px 1px 0 rgba(0,91,82,0.2); margin-bottom: 20px; } .standout p { margin: 0; } /*-- Layout --*/ .container { width: 960px; margin: 0 auto; position: relative; } #main { width: 730px; margin: 0 auto 60px auto; } .columns { padding-top: 1em; } .columns .col { float: left; margin-right: 20px; width: 355px; } .columns .col2 { margin-right: 0; } /*-- Masthead --*/ #masthead { background: url("/themes/dhaansw/img/bg/nav.jpg") repeat-x; position: relative; z-index: 50; height: 53px; margin-bottom: 30px; } #logo { position: absolute; top: 15px; left: 15px; z-index: 100; border: 0; } /*-- Global Nav --*/ #global-nav { margin: 0; list-style: none; float: right; } #global-nav li { float: left; position: relative; } #global-nav a { display: block; height: 50px; border: 0; background: url("/themes/dhaansw/img/bg/global-nav.png") no-repeat; text-indent: -999em; overflow: hidden; } /* Default states */ #global-nav li.n-aboutus a { width: 131px; background-position: 0 0; } #global-nav li.n-hygienist a { width: 126px; background-position: -131px 0; } #global-nav li.n-members a { width: 168px; background-position: -894px 0; } #global-nav li.n-events a { width: 118px; background-position: -444px 0; } #global-nav li.n-training a { width: 153px; background-position: -585px 0; } #global-nav li.n-contactus a { width: 118px; background-position: -738px 0; } /* Hover states */ #global-nav li.n-aboutus a:hover { background-position: 0 -50px; } #global-nav li.n-hygienist a:hover { background-position: -131px -50px; } #global-nav li.n-members a:hover { background-position: -894px -50px; } #global-nav li.n-events a:hover { background-position: -444px -50px; } #global-nav li.n-training a:hover { background-position: -585px -50px; } #global-nav li.n-contactus a:hover { background-position: -738px -50px; } /* Active states */ .s-aboutus #global-nav li.n-aboutus a, .s-hygienist #global-nav li.n-hygienist a, .s-members #global-nav li.n-members a, .s-events #global-nav li.n-events a, .s-training #global-nav li.n-training a, .s-contactus #global-nav li.n-contactus a { border-bottom: 3px solid #008E7E; } /* Dropdown */ #global-nav ul.subnav { float: none; list-style: none; background: #F5F5F5; position: absolute; top: 50px; left: 0px; width: 175px; margin: 0; border-top: 3px solid #008E7E; padding: 0 10px; z-index: 100; display: none; -moz-box-shadow: 2px 2px 5px #CCC; -webkit-box-shadow: 2px 2px 5px #CCC; } #global-nav ul.subnav li { float: none; margin: 0; padding: 10px 7px; border-bottom: 1px dashed #C0C0C0; } #global-nav ul.subnav li.last { border: 0; } #global-nav ul.subnav a { height: auto; width: auto !important; background: none; text-indent: 0; border: 0 !important; color: #666; font-size: 0.85em; display: inline; } #global-nav ul.subnav a:hover { color: #008E7E; } #global-nav > li:hover ul.subnav { display: block; } /*-- Headings --*/ #heading { padding-left: 20px; height: 52px; position: relative; margin-bottom: 30px; background: #008E7E url("/themes/dhaansw/img/bg/heading-1.jpg") right 0 no-repeat; } #heading h1 { font-size: 1.8em; text-transform: uppercase; color: #FFF; width: 600px; position: relative; top: 17px; } #heading i { background: url("/themes/dhaansw/img/bg/heading-pointer.png"); width: 8px; height: 16px; position: absolute; top: 50%; left: 0; margin-top: -8px; } .sIFR-hasFlash #heading h1 { height: 20px; } .sIFR-alternate { position: absolute; top: -999em; left: -999em; } h2 { background: url("/themes/dhaansw/img/bg/heading-bullet.png") 0 49.5% no-repeat; color: #008E7E; padding-left: 20px; margin-bottom: 1em; font-size: 1.8em; text-transform: uppercase; } .sIFR-hasFlash h2 { height: 19px; } h3 { color: #008E7E; font-size: 1.3em; margin-bottom: 0.5em; } h1#dhaansw, #latest-news h2, #enewsletter h2, #member-benefits h2, .s-login h1 { background: url("/themes/dhaansw/img/bg/headings.png"); text-indent: -999em; font-size: 1px; height: 15px; } h1#dhaansw { width: 605px; height: 44px; margin: 26px 0 30px 0; padding: 0; background-position: 0 -144px; } #latest-news h2 { background-position: 0 -21px; } #enewsletter h1, #enewsletter h2 { background-position: 0 -45px; } #member-benefits h2 { background-position: -114px -93px; } .s-login h1 { background-position: -114px -93px; width: 150px; } h1#thankyou { background-position: 0 -116px; } /*-- Buttons --*/ .btn { background: url("/themes/dhaansw/img/bg/buttons.png"); height: 36px; overflow: hidden; text-indent: -999em; border: 0; display: inline; float: left; } .btn:hover { border: 0 !important; } .btn-submit { width: 84px; } .btn-submit:hover { background-position: 0 -36px; } .btn-login { width: 72px; background-position: -173px 0; } .btn-login:hover { background-position: -173px -36px; } .btn-clicktojoin { width: 138px; background-position: -261px 0; } .btn-clicktojoin:hover { background-position: -261px -36px; } /*-- Footer --*/ #footer { border-top: 1px solid #C0C0C0; padding: 10px 15px; text-align: right; } #footer p { font-size: 1.1em; line-height: 230%; text-align: left; } #footer a { color: #8C8C8C; border: 0; } #tbone { border: 0; position: relative; top: 9px; } /*-- Homepage Feature --*/ #feature-wrap { position: relative; } #feature { width: 730px; height: 305px; color: #FFF; overflow: hidden; } #feature-nav { display: none; } #feature .panel { height: 305px; position: relative; } #feature h2 { color: #FFF; background: none; padding: 0; text-transform: none; } .slide-btn { position: absolute; top: 136px; width: 30px; height: 31px; background: red; text-indent: -999em; overflow: hidden; background: url("/themes/dhaansw/img/bg/buttons.png"); cursor: pointer; } .slide-prev { left: -15px; background-position: -134px -3px; } .slide-next { right: -15px; background-position: -92px -3px; } .jFlowSlideContainer { overflow: hidden !important; } #feat-hygienist { background: #008E7E url("/themes/dhaansw/img/bg/home-feature-1.jpg") no-repeat; } #feat-hygienist .jFlowSlideContainer { padding: 56px 30px 0 300px; } #feat-two { background: #93258F url("/themes/dhaansw/img/bg/home-feature-2.jpg") no-repeat; } #feat-two .jFlowSlideContainer { padding: 56px 30px 0 300px; } /*-- Homepage Sections --*/ #home-content { margin:20px 0; } .sections { height: 19em; overflow: hidden; /*background: url("/themes/dhaansw/img/bg/home-section-divider.gif") 316px 0 repeat-y; */ margin-bottom: 20px; } .sections .section { width: 270px; float: left; margin-left: 60px; display: inline; } .sections h2 { margin-bottom: 15px; } .sections #latest-news { margin-left: 15px; width: 300px; margin-left: 115px; } .sections #latest-news ul { margin-left: 15px; } .sections #latest-news li { font-size: 18px; } .sections #member-benefits { border-left: 1px solid #c0c0c0; padding-left: 60px; } .sections .input { background: url("/themes/dhaansw/img/bg/input.png") no-repeat; height: 41px; position: relative; } .sections .input input.textbox { border: 0; font-size: 14px; font-family: "Arial"; color: #666; padding: 7px 9px; width: 150px; position: absolute; top: 5px; left: 3px; background: transparent; z-index: 2; } .sections .input label { position: absolute; top: 5px; left: 3px; font-size: 14px; padding: 7px 9px; z-index: 1; } .sections .input .btn { float: right; position: relative; top: 3px; } /*-- Form --*/ .form { margin: 0 0 2em 0; width: 520px; } .form .input { background: url("/themes/dhaansw/img/bg/input-lrg.png") right bottom no-repeat; height: 41px; position: relative; margin-bottom: 15px; } .form .textarea { background-image: url("/themes/dhaansw/img/bg/textarea.png"); height: 92px; } .form .input input, .form .input textarea { border: 0; font-size: 14px; font-family: "Arial"; color: #666; padding: 9px 10px; width: 300px; position: absolute; top: 3px; right: 3px; background: transparent; } .form .input textarea { height: 68px; } .form .input label { line-height: 41px; font-weight: bold; width: 160px; display: block; text-align: right; } .form input.btn { margin-left: 195px; } .form span.error { background: #D70028; padding: 3px 8px; color: #fff; position: absolute; top: 8px; left: 530px; white-space: nowrap; -moz-border-radius: 5px; -webkit-border-radius: 5px; } /*-- Login Page --*/ body.s-login { background: #FFF url("/themes/dhaansw/img/bg/splash.jpg") center -10px no-repeat; } .s-login #container { width: 270px; margin: 0 auto; text-align: center; padding-top: 40px; } .s-login #logo { position: static; top: auto; left: auto; margin: 0 auto; } .s-login p { text-align: left; } .s-login h1 { margin: 60px 0 15px 0; } .s-login .input { background: url("/themes/dhaansw/img/bg/input.png") right bottom no-repeat; height: 41px; position: relative; margin-bottom: 15px; } .s-login .input input { border: 0; font-size: 14px; font-family: "Arial"; color: #666; padding: 9px 10px; width: 168px; position: absolute; top: 3px; right: 3px; background: transparent; } .s-login .input label { line-height: 41px; font-weight: bold; } .s-login .btn-login { margin-left: 78px; } .s-login a.forgot { font-size: 0.9em; font-style: italic; position: relative; top: 7px; left: 20px; color: #666; border-bottom: 1px dotted #DFDFDF; } .s-login a.forgot:hover { color: #008E7E; border-bottom: 1px solid #008E7E; } /*-- General Styles --*/ .image { float: right; margin: 0 0 30px 30px; } .image a { display: block; border: 1px solid #BCE2DE; padding: 10px; background: #FFF; } .image a:hover { border: 1px solid #008E7E; } .image img { display: block; } /*-- Clearfix --*/ .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .clearfix { display: inline-block; } html[xmlns] .clearfix { display: block; } * html .clearfix { height: 1%; }