/*----------------------------------------------------------------------------------- Theme Name: Clarify Theme URI: http://www.pixelion.net Description: A Landing page Theme Author: Weboxeur Author URI: http://www.weboxeur.com License: GNU General Public License version 3.0 License URI: http://www.gnu.org/licenses/gpl-3.0.html Version: 1.0 -------------------------------------------------------------------------------------*/ /* 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, 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, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1;} ol, ul { list-style: none;} blockquote, q { quotes: none;} blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* Base Body Styles */ body{ background: #fff; min-width: 1000px; color: #878990; font: 12px 'Helvetica Neue', Helvetica, Arial, sans-serif; } h1,h2,h3,h4,h5,h6 { font-weight:bold; } h1 { font-size:30px; } h2 { font-size:24px; } h3 { font-size:18px; } h4 { font-size:14px; } h5 { font-size:12px; } h6 { font-size:10px; } /* * Remove text-shadow in selection highlight: h5bp.com/i * These selection declarations have to be separate * Also: hot pink! (or customize the background color to match your design) */ ::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; } ::selection { background: #c30000; color: #fff; text-shadow: none; } /* Links */ a { text-decoration: none; color: #5d6067; } a:visited { color: #5d6067; } a:hover { color: #5d6067; } a:focus { outline: thin dotted; } /* Improve readability when focused and hovered in all browsers: h5bp.com/h */ a:hover, a:active { outline: 0; } /** Contain floats: h5bp.com/q **/ .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } /* Header */ .header-wrapper { min-width: 1000px; width: 100%; position: fixed; min-height: 60px; background: #262b31; color: #fff; border-bottom: 1px solid #1b1e21; z-index: 10; } #header { width: 880px; margin: 0px auto; padding: 0px 30px;font-size:16px; line-height:22px; font-family: Arial, } #header .logo { float: left; margin: 25px 0px 0px; } #header nav { float: right; margin: 23px 0px 0px; } #header nav ul li { margin: 0px 36px 0px 0px; display: inline; font: bold 12px/18px 'Helvetica Neue', Helvetica, Arial, sans-serif; } #header nav ul li:last-child { margin: 0px; } #header nav ul li a { color: #dfe5e6; text-shadow: 1px 1px 1px #000; } #header nav ul li a:hover { color: #fff; border-bottom: 1px solid #808689; } #header a.sign-in { float: right; line-height: 0px; font-size: 0px; margin: 17px 0px 0px 36px; text-align: center; display: inline-block; width: 96px; height: 32px; background: url('http://www.gemstonebusiness.com/images/sign-n-btn.png') center top no-repeat; } #header a.sign-in:hover { border-bottom: none; background-position: bottom; } /* Content */ .wrapper { background: fixed #1B1E21 url('http://www.gemstonebusiness.com/images/bg.png') 0px 61px repeat-x; padding: 20px 0px 0px; overflow: hidden; } .container { width: 942px; margin: 0px auto 30px; } .inner-container { padding: 25px 0px 0px 0px; border-radius: 0px 0px 4px 4px; background: #f9f8fc; } #top { height: 74px; background: #fff; border-radius: 4px 4px 0px 0px; border-bottom: 1px solid #cccccc; box-shadow: 0px 0px 1px 1px rgba(0,0,0, 0.1); } #top article { height: 34px; float: left; } #top article.social { margin: 0px 15px 0px 0px; padding: 23px 22px 0px 35px; width: 109px; height: 51px; background: url('http://www.gemstonebusiness.com/images/top-separator.png') right bottom no-repeat; } #top article.social a { display: inline-block; width: 32px; height: 32px; background: url(images/social.png) 0px 0px no-repeat; } #top article.social .in { background-position: 0px 0px; margin: 0px 2px 0px 0px; } #top article.social .in:hover { background-position: 0px -32px; } #top article.social .fb { background-position: -39px 0px; margin: 0px 2px 0px 0px; } #top article.social .fb:hover { background-position: -39px -32px; } #top article.social .tw { background-position: -78px 0px; } #top article.social .tw:hover { background-position: -78px -32px; } #top article.tweet { width: 562px; padding: 30px 0px 0px; text-align: center; } #top article.tweet li { color: #b2b2b2; font: 12px/20px 'Helvetica Neue', Helvetica, Arial, sans-serif; display: inline-block; background: url(images/tw-bird.png) left center no-repeat; padding: 0px 0px 0px 42px; } #top article.tweet li a { color: #009ad9; } #top article.phone { margin: 0px 0px 0px 15px; width: 137px; height: 54px; padding: 20px 22px 0px 23px; background: url('http://www.gemstonebusiness.com/images/top-separator.png') left bottom no-repeat; } #top article.phone p { font: bold 20px/20px 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #828a8f; } #top article.phone p span { font-size: 12px; line-height: 12px; color: #a5acb0; } #feature { overflow: hidden; border-radius: 4px; border: 1px solid #d1d4d3; margin: 0px auto 27px; width: 880px; } #feature header { height: 48px; border-bottom: 1px solid #d1d4d3; background: #fff url(images/content-header.png) repeat-x bottom; } #feature header h2 { text-align: center; color: #6c6f70; font: bold 18px/50px 'Helvetica Neue', Helvetica, Arial, sans-serif; } #feature section { padding: 41px 29px 25px; overflow: hidden; background: #fff; background-image:url('http://internetmarketing.ee/tee.jpg');background-repeat: no-repeat;} #feature section h3 { color: #000; font: bold 20px/24px 'Helvetica Neue', Helvetica, Arial, sans-serif; margin: 0px 0px 13px; } #feature section p { color: #8c8d8e; font: bold 16px/20px 'Helvetica Neue', Helvetica, Arial, sans-serif; margin: 0px 0px 25px; } #feature section a.link { color: #1a94c9; font: bold 16spx 'Helvetica Neue', Helvetica, Arial, sans-serif; } #feature section a.link:hover { text-decoration: underline; } #feature section a.button { margin: 0px auto 15px; display: block; background: url('http://www.gemstonebusiness.com/images/long-button.png') center top no-repeat; width: 303px; height: 43px; color: #fff; font: bold 83px 'Helvetica Neue', Helvetica, Arial, sans-serif; text-shadow: -1px -1px 0px #d55d18; } #feature section a.button:hover { background-position: bottom; } #feature section article.left { float: left; text-align: center; width: 370px; } #feature section article.right { float: right; width: 381px; height: 300px; float: right; border-radius: 4px; overflow: hidden; } .button { margin: 0px auto 15px; display: block; background: url('http://www.gemstonebusiness.com/images/long-button.png') center top no-repeat; width: 303px; height: 43px; color: #fff; font: bold 83px 'Helvetica Neue', Helvetica, Arial, sans-serif; text-shadow: -1px -1px 0px #d55d18; } .button:hover { background-position: bottom; } .separator { background: url('http://www.gemstonebusiness.com/images/horz-separator.png') no-repeat; height: 17px; margin: 0px auto 10px; width: 588px; } .columns { width: 880px; margin: 0px auto; } .f-wrapper { position: relative; width: 430px; float: left; margin: 0px 0px 25px; } #features { /*float: left;*/ overflow: hidden; border-radius: 4px; border: 1px solid #d1d4d3; width: 430px; } #features header { height: 48px; border-bottom: 1px solid #d1d4d3; background: #fff url(images/content-header.png) repeat-x bottom; } #features header h2 { color: #6c6f70; font: bold 18px/50px 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 0px 26px 0px 30px; } #features section { background: #fff; height: 280px; width: 430px; } #features .slide li { border-bottom: 1px solid #ececec; height: 52px; padding: 20px 20px 20px 30px; } #features .slide li:last-child { border-bottom: 0px; } #features .slide li figure { float: left; margin: 3px 20px 0px 0px; } #features .slide li article { color: #8e908f; font: 14px/18px 'Helvetica Neue', Helvetica, Arial, sans-serif; } #features .slide li article h4 { color: #575a5d; font-weight: bold; } .f-wrapper .slider-pagerb { top: 10px; right: 25px; position: absolute; } .f-wrapper .slider-pagerb a { margin: 0px 0px 0px 2px; display: inline-block; width: 9px; height: 8px; background: url(images/bullets.png) right no-repeat; font-size: 0px; line-height: 0px; } .f-wrapper .slider-pagerb a.activeSlide { background-position: left; } .ss-wrapper { position: relative; width: 430px; float: right; margin: 0px 0px 25px; } #snapshots { /*float: right;*/ overflow: hidden; border-radius: 4px; border: 1px solid #d1d4d3; width: 430px; } #snapshots header { height: 48px; border-bottom: 1px solid #d1d4d3; background: #fff url(images/content-header.png) repeat-x bottom; } #snapshots header h2 { color: #6c6f70; font: bold 18px/50px 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 0px 26px 0px 30px; } #snapshots article { background: #fff; padding: 15px 40px; height: 250px; width: 350px; } #snapshots .slide li { padding: 5px; background: #ededed; position: relative; line-height: 0px; height: 106px; width: 340px; } #snapshots .slide li:hover { background: #999a9b; } #snapshots .slide li:first-child { margin: 0px 0px 10px; } #snapshots .slide li a { line-height: 0px; } #snapshots .slide li span { display: none; width: 32px; height: 32px; background: url(images/img-hover.png) no-repeat; position: absolute; top: 50%; left: 50%; margin: -16px 0px 0px -16px; } #snapshots .slide li:hover span { display: block; } .ss-wrapper .slider-pager { top: 10px; right: 28px; position: absolute; } .ss-wrapper .slider-pager a { margin: 0px 0px 0px 2px; display: inline-block; width: 9px; height: 8px; background: url(images/bullets.png) right no-repeat; font-size: 0px; line-height: 0px; } .ss-wrapper .slider-pager a.activeSlide { background-position: left; } #price-table { overflow: hidden; border-radius: 4px; border: 1px solid #d1d4d3; margin: 0px auto 25px; width: 880px; } #price-table header { text-align: center; height: 48px; border-bottom: 1px solid #d1d4d3; background: #fff url(images/content-header.png) repeat-x bottom; } #price-table header h2 { color: #6c6f70; font: bold 18px/50px 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 0px 26px 0px 30px; } #price-table article { width: 290px; float: left; background: #fff; } #price-table article.center { width: 298px; border-left: 1px solid #d1d4d3; border-right: 1px solid #d1d4d3; } #price-table article .plan-name { padding: 10px 0px 0px; text-align: center; background: #f7fafb; height: 58px; border-bottom: 1px solid #d1d4d3; } #price-table article .plan-name h4 { color: #4f534d; font: bold 24px 'Helvetica Neue', Helvetica, Arial, sans-serif; } #price-table article .plan-name h4 span { display: block; color: #686d67; font: bold 14px 'Helvetica Neue', Helvetica, Arial, sans-serif; } #price-table article .plan-price { padding: 20px 0px 0px; text-align: center; background: #fff; height: 50px; border-bottom: 1px solid #d1d4d3; } #price-table article .plan-price p { color: #888c87; font: bold 14px 'Helvetica Neue', Helvetica, Arial, sans-serif; } #price-table article .plan-price p span { display: block; color: #acaea7; font: bold 12px 'Helvetica Neue', Helvetica, Arial, sans-serif; } #price-table article ul { padding: 27px 23px 13px; border-bottom: 1px solid #d1d4d3; } #price-table article ul li { color: #acaea7; margin: 0px 0px 8px; padding: 0px 0px 0px 32px; font: 12px/21px 'Helvetica Neue', Helvetica, Arial, sans-serif; background: url(images/table-icon.png) no-repeat; } #price-table article ul li.yes { background-position: left top; } #price-table article ul li.no { background-position: left bottom; } #price-table article .button { text-align: center; padding: 15px 0px; } #price-table article .button a { text-align: center; font: bold 14px 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #fff; text-shadow: 0px -1px 0px #333; display: inline-block; width: 128px; padding: 15px 0px 0px; height: 45px; background: url(images/table-btn.png) top no-repeat; } #price-table article .button a span { display: block; color: #cfcfcf; font: bold 12px 'Helvetica Neue', Helvetica, Arial, sans-serif; } #price-table article .button a:hover { background: url(images/table-btn.png) bottom no-repeat; } #subscribe { width: 430px; float: left; margin: 0px 0px 40px; overflow: hidden; border-radius: 4px; border: 1px solid #d1d4d3; } #subscribe header { height: 48px; border-bottom: 1px solid #d1d4d3; background: #fff url(images/content-header.png) repeat-x bottom; } #subscribe header h2 { color: #6c6f70; font: bold 18px/50px 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 0px 26px 0px 30px; } #subscribe article { background: #fff; padding: 22px 30px 23px; min-height: 130px; } #subscribe article p { margin: 0px 0px 22px; color: #8f9497; font: 14px/18px 'Helvetica Neue', Helvetica, Arial, sans-serif; } #subscribe article form { margin: 0px 0px 15px; } #subscribe article .field { outline: none; height: 24px; width: 235px; border: none; padding: 10px 130px 10px 10px; background: url(images/input-field.png) no-repeat; color: #cfcfcf; font: bold 12px/24px 'Helvetica Neue', Helvetica, Arial, sans-serif; } #subscribe article fieldset { position: relative; } #subscribe article .button { position: absolute; top: 7px; cursor: pointer; right: 7px; background: url(images/subscribe-btn.png) center top no-repeat; border: none; width: 112px; height: 30px; color: #fff; text-shadow: -1px -1px 0px #be6119; font-size:40px} #subscribe article .button:hover { background-position: bottom; } #subscribe label.error { font: 12px 'Helvetica Neue', Helvetica, Arial, sans-serif; position: absolute; top: 47px; left: 0px; color: #f00; } #subscribe input.error { } #testimonial { width: 430px; float: right; margin: 0px 0px 40px; overflow: hidden; border-radius: 4px; border: 1px solid #d1d4d3; } #testimonial header { height: 48px; border-bottom: 1px solid #d1d4d3; background: #fff url(images/content-header.png) repeat-x bottom; } #testimonial header h2 { color: #6c6f70; font: bold 18px/50px 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 0px 26px 0px 30px; } #testimonial article { background: #fff; padding: 25px 30px 10px; min-height: 145px; } #testimonial article blockquote { margin: 0px 0px 20px; background: url(images/qoute.png) left 3px no-repeat; padding: 0px 0px 0px 42px; } #testimonial article p { color: #8f9497; font: 14px/18px 'Helvetica Neue', Helvetica, Arial, sans-serif; margin-top: -3px; } #testimonial article figure {} #testimonial article figure img { float: left; margin: 0px 18px 0px 0px; border-radius: 57px; } #testimonial article figure figcaption { padding: 10px 0px 0px; color: #878990; font: bold 12px/14px 'Helvetica Neue', Helvetica, Arial, sans-serif; } #testimonial article figure figcaption a { color: #878990; } #testimonial article figure figcaption a:hover { text-decoration: underline; } #testimonial article figure figcaption span { font-weight: normal; display: block; } #call-to-action { text-align:center;padding: 38px 0px; border-top: 1px dashed #d1d4d3; border-bottom: 1px dashed #d1d4d3; } #call-to-action a.link { color: #1a94c9; font: bold 14px 'Helvetica Neue', Helvetica, Arial, sans-serif; } #call-to-action a.link:hover { text-decoration: underline; } #call-to-action a.button { margin: 0px auto 10px; display: block; background: url('http://www.gemstonebusiness.com/images/long-button.png') center top no-repeat; width: 303px; height: 43px; color: #fff; font: bold 18px/43px 'Helvetica Neue', Helvetica, Arial, sans-serif; text-shadow: -1px -1px 0px #d55d18; } #call-to-action a.button:hover { background-position: bottom; } #clients { text-align: center; padding: 40px 0px 40px; } #clients img { margin: 0px 10px 0px 0px; } /* Footer */ footer { padding: 0px 30px 100px; width: 880px; margin: 0px auto; position: relative; } footer .footer-logo { margin: 0px 0px 18px 0px; display: block; } footer p { color: #878990; font: 12px 'Helvetica Neue', Helvetica, Arial, sans-serif; margin: 0px 0px 20px; } footer p a { color: #5d6067 !important; } footer p a:hover { color: #5d6067; text-decoration: underline; } footer h5 { margin: -2px 0px 20px; color: #5d6067; font: bold 12px 'Helvetica Neue', Helvetica, Arial, sans-serif; } footer ul li { color: #878990; font: 12px 'Helvetica Neue', Helvetica, Arial, sans-serif; margin: 0px 0px 4px; } footer ul li a { color: #878990 !important; } footer ul li a:hover { color: #878990; text-decoration: underline; } footer article { float: left; margin: 0px 70px 0px 0px; } footer article.links { margin: 0px 85px 0px 0px; } footer .go-top { position: absolute; top: -5px; right: 35px; color: #5d6067; font: 9px 'Helvetica Neue', Helvetica, Arial, sans-serif; } .transparent { zoom: 1; filter: alpha(opacity=90); opacity: 0.9; } strong {font-weight:bold} ol li {list-style-type:decimal; padding-bottom:10px} ul li {list-style-type:disc; margin-left:20px}