body {margin: 0 auto; text-align: center; background: url(images/body_bg.png) top center #1A1A1A; font-family: Helvetica, Arial, Verdana, sans-serif; color: #FFF; font-size: 12px;} a {text-decoration:none; color: #0000FF; outline:none;} button {cursor:pointer;} :focus {outline: none;} /* for including obfuscated emails */ span.reverse_email { direction:rtl; unicode-bidi:bidi-override; } #header_wrapper {background: url(images/header_wrapper_bg.png) top center repeat-x; width: 100%; height: 165px; margin: 0 0 5px 0; min-width: 830px;} #header_wrapper #header {width:100%; height: 85px; margin: 0 auto; background: url(images/header_bg.png) top center no-repeat;} #header_wrapper #header .inner {width: 830px; height: 85px; margin: 0 auto;} #header_wrapper.home {background: url(images/header_wrapper_bg_home.png) top center repeat-x; height: 365px; margin: 365px auto; position: absolute; top: 50%; margin-top: -182px;} #header_wrapper.home #header {height: 310px; background: url(images/header_bg_home.png) top center no-repeat;} #header_wrapper #header h1 a#logo {display:block; height: 55px; width: 180px; float:left; position:relative; top: 10px; left: 12px; background: none; margin: 0; padding: 0; font-size: 14px;} #header_wrapper #header h1 a#logo span {display: none;} #header_wrapper.home #header h1 a#logo {top: 100px; left: 420px; height: 110px; width: 160px;} #header_wrapper a.madeForMac {display: block; position: relative; float: right; top: 40px; right: 10px; height: 25px; width: 117px; background: url(images/madeForMac.png) top left no-repeat;} #header_wrapper a.madeForMac:hover {background-position: 0 -25px;} #header_wrapper a.madeForMac span {display: none;} #header_wrapper.home a.madeForMac {top: 260px; right: 0px;} #header_wrapper #nav_wrapper {background: url(images/nav_wrapper_bg.png) top center repeat-x; width: 100%; height: 55px; text-align: center;} #header_wrapper #nav_wrapper #nav {background: url(images/nav_bg.png) top center repeat-x; margin: 0 auto; padding: 0; width: 100%; height: 55px; text-align: center;} #header_wrapper #nav_wrapper #nav .inner {width: 830px; height: 55px; margin: 0 auto;} #header_wrapper #nav_wrapper #nav ul {margin: 0 auto; padding: 0; width:263px; text-align: center;} #header_wrapper #nav_wrapper #nav ul li {display: inline; list-style:none; margin: 0; padding: 0; float: left;} #header_wrapper #nav_wrapper #nav ul li a {display:block; padding:0; height: 50px; background: url(images/nav_links.png) no-repeat top left;} #header_wrapper #nav_wrapper #nav ul li a span {display:none;} #header_wrapper #nav_wrapper #nav ul li.theCompany a {width: 134px; background-position: 0 0;} #header_wrapper #nav_wrapper #nav ul li.theSoftware a {width: 129px; background-position: -134px 0;} #header_wrapper #nav_wrapper #nav ul li.theCompany a:hover {width: 134px; background-position: 0 -55px;} #header_wrapper #nav_wrapper #nav ul li.theSoftware a:hover {width: 129px; background-position: -134px -55px;} #header_wrapper #nav_wrapper #nav ul li.theCompany a:active {width: 134px; background-position: 0 -110px;} #header_wrapper #nav_wrapper #nav ul li.theSoftware a:active {width: 129px; background-position: -134px -110px;} #header_wrapper #nav_wrapper #nav ul li.theCompany a.active {width: 134px; background-position: 0 -110px;} #header_wrapper #nav_wrapper #nav ul li.theSoftware a.active {width: 129px; background-position: -134px -110px;} #header_wrapper #nav_wrapper #nav ul li.theCompany a.active:hover {width: 134px; background-position: 0 -55px;} #header_wrapper #nav_wrapper #nav ul li.theSoftware a.active:hover {width: 129px; background-position: -134px -55px;} /* --------------------------- */ /* --------- Content --------- */ /* --------------------------- */ #content_wrapper {width: 830px; margin: 0 auto; padding: 5px 0 5px 0; background: url(images/content_wrapper_bg.gif) top center repeat-y; position: relative;} a {color: #daffc8;} #banner.espionage {background: url(images/banner_espionage.png) top center no-repeat; width: 800px; height: 300px; margin: 0 15px 5px 15px; padding: 0; position: relative;} #banner.espionage ul.options {position: relative; right: 15px; top:245px; width: 300px; float: right;} #banner.espionage ul.options li {display: inline; float: right;} #banner.espionage ul.options li a {display: block; background: url(images/banner_options_bg.png) top left no-repeat; height: 41px; width: 50px;} #banner.espionage ul.options li a span {display: none;} #banner.espionage ul.options li.buyNow a {width: 84px; background-position: -98px 0;} #banner.espionage ul.options li.downloadDemo a {width: 93px; background-position: 0 0; margin: 0 5px 0 0;} #banner.espionage ul.options li.buyNow a:hover {background-position: -98px -41px;} #banner.espionage ul.options li.downloadDemo a:hover {background-position: 0 -41px;} #banner.espionage ul.options li.buyNow a:active {background-position: -98px -82px;} #banner.espionage ul.options li.downloadDemo a:active {background-position: 0 -82px;} #banner.espionage ul.options li.buyNow input.buy {display: block; background: url(images/banner_options_bg.png) top left no-repeat; border: none; height: 41px; width: 84px; background-position: -98px 0; margin: 0; padding: 0;} #banner.espionage ul.options li.buyNow input.buy:hover {background-position: -98px -41px; cursor: pointer;} #banner.espionage ul.options li.buyNow input.buy:active {background-position: -98px -82px;} #banner.espionage h2.logo {display: block; width: 398px; height: 322px; background: url(images/banner_espionage_h2_bg.png) top left no-repeat; position: relative; top: 0px; left: -50px;} #banner.espionage h2.logo span {display: none;} #banner .ribbon {display: block; width: 66px; height: 75px; background: url(images/ribbon_version_2_5.png) top left no-repeat; position: absolute; top: -5px; right: 40px; float: right; z-index: 2;} #banner .ribbon span {display: none;} #banner.espionage2 {background: url(images/banner_espionage2.png) top left no-repeat; width: 800px; height: 415px; margin: 0 15px 5px 15px; padding: 0; position: relative;} .popup {display: block; width: 220px; position: absolute; z-index: 1; opacity: 0; display: none; -moz-opacity: 0; filter: alpha(opacity=0);} .popup .top {background: url(images/popup.png) top center no-repeat;} .popup .bottom {background: url(images/popup.png) bottom center no-repeat; height: 23px;} .popup .top ul {width: 170px; padding: 25px 25px 9px 25px;} .popup .top ul li {display: block; list-style: none; margin: 0; padding: 7px 0 10px 0; height: 12px; color: #273e53; clear: left; font-size: 12px; line-height: 12px; background: url(images/popup_hr.png) bottom left repeat-x;} .popup .top ul li label {width: 45px; float: left; margin: 0 10px 0 0; color: #59758f; font-style: italic;} .popup .top ul li span {font-weight: bold; text-align: right; width: 115px; display: block; float: left;} .popup .top ul li span a {color: #1785cd !important;} .popup .top ul li.first {padding-top: 0;} .popup .top ul li.last {padding-bottom: 0; background: none;} .popup .top .inner {width: 170px; padding: 25px 25px 10px 25px; display: block; margin: 0 !important;} .popup .top .inner h5 {margin: 0 !important; color: #333 !important; text-align: center; font-family: Georgia !important; font-size: 30px!important; padding: 0 0 15px 0; background: url(images/popup_hr.png) bottom left repeat-x;} .popup .top .inner .small {font-size: 11px !important; color: #676767 !important; font-family: Helvetica, Arial !important; text-align: center; line-height: 11px !important; margin: 0 !important;} .popup .top .inner form {padding: 10px 0 0 0;} .popup .top .inner form .input_wrapper {padding: 10px 5px 5px 5px; margin: 0 0 5px 0; height: 21px; width: 160px; background: url(images/popup_input.png) top left no-repeat; overflow: hidden;} .popup .top .inner form .input_wrapper input {padding: 0; margin: 0; font-size: 17px; color: #999; text-align: center; line-height: 17px; border: none; background: none; width: 100%; font-family: Helvetica, Arial, Verdana, sans-serif;} .popup .top .inner form .input_wrapper input:active, .popup .top .inner form .input_wrapper input:focus {outline: none;} .popup .top .inner form button.redeem {background: url(images/popup_redeem_bg.png) top left no-repeat; width: 170px; height: 20px; margin: 0; padding: 0;} .popup .top .inner form button.redeem:hover {background-position: 0 -20px;} .popup .top .inner form button.redeem:active {background-position: 0 -40px;} .popup_wrapper_alt {position: relative;} .playScreencast {display: block; width: 60px; height: 46px; background: url(images/banner_play.png) 0px 0px no-repeat; position: relative; top: 345px; left: 370px;} .playScreencast:hover {background-position: 0 -46px;} .playScreencast span {display: none;} .slInfo {display: block; width: 159px; height: 49px; background: url(images/SLBadge.png) 0px 0px no-repeat; position: relative; top: -35px; left: 15px; } .slInfo span {display: none;} #mainScreencast {display:none; padding: 5px 0 0 5px; float: left; position: absolute; top: 0px; left: 0px;} /* --------------------------- */ /* --------- Columns --------- */ /* --------------------------- */ .columns {margin: 0 0 25px 0; float: left;} .columns.last {margin: 0 0 60px 0;} .columns.noMargin {margin: 0;} .columns .column {float: left;} .columns.one .column {width: 740px; margin: 0;} .columns.two .column {width: 350px; margin: 0 40px 0 0;} .columns.three .column {width: 220px; margin: 0 40px 0 0;} .columns .column .columns {margin: 0 0 25px 0;} .columns.two .column .columns.two .column {width: 155px; margin: 0 40px 0 0;} .columns .column.last {float: left; margin-right: 0 !important;} #content_wrapper #content .block ul.options_alt {position: relative; right: -15px; top:-16px; width: 300px; float: right; height: 41px;} #content_wrapper #content .block ul.options_alt li {display: inline; float: right; margin: 0; padding: 0;} #content_wrapper #content .block ul.options_alt li a {display: block; background: url(images/banner_options_bg_alt.png) top left no-repeat; height: 41px; width: 50px;} #content_wrapper #content .block ul.options_alt li a span {display: none;} #content_wrapper #content .block ul.options_alt li.downloadDemo a {width: 93px; background-position: 0 0; margin: 0 5px 0 0;} #content_wrapper #content .block ul.options_alt li.buyNow a {width: 80px; background-position: -98px 0;} #content_wrapper #content .block ul.options_alt li.upgrade a {width: 79px; background-position: -178px 0;} #content_wrapper #content .block ul.options_alt li.downloadDemo a:hover {background-position: 0 -41px;} #content_wrapper #content .block ul.options_alt li.buyNow a:hover {background-position: -98px -41px;} #content_wrapper #content .block ul.options_alt li.upgrade a:hover {background-position: -178px -41px;} #content_wrapper #content .block ul.options_alt li.downloadDemo a:active {background-position: 0 -82px;} #content_wrapper #content .block ul.options_alt li.buyNow a:active {background-position: -98px -82px;} #content_wrapper #content .block ul.options_alt li.upgrade a:active {background-position: -178px -82px;} #content_wrapper #content .block ul.options_alt input.buy {display: block; background: url(images/banner_options_bg_alt.png) top left no-repeat; border: none; height: 41px; width: 80px; background-position: -98px 0; margin: 0; padding: 0;} #content_wrapper #content .block ul.options_alt input.buy:hover {background-position: -98px -41px; cursor: pointer;} #content_wrapper #content .block ul.options_alt input.buy:active {background-position: -98px -82px;} #content_wrapper #subnav {padding-bottom: 0 !important;} #content_wrapper #subnav ul.nav {height: 40px;} #content_wrapper #subnav ul.nav li {display: inline; list-style: none; margin: 0; padding: 0 25px 0 0; float: left;} #content_wrapper #subnav ul.nav li a {color: #777; font-size: 14px; font-weight: normal; display: block; height: 40px; float: left;} #content_wrapper #subnav ul.nav li a:hover {color:#DAFFC8;} #content_wrapper #subnav ul.nav li a.active {color: #EEE; background: url(images/subnav_li_bg.png) bottom center no-repeat;} #content_wrapper #social_nav {} #content_wrapper #social_nav a img { margin-top: -10px; margin-left: 8px;} #content_wrapper #content {margin: 0 15px 0 15px; background: url(images/content_bg.png) top left; width: 800px;} #content_wrapper #content .block {padding: 30px;} #content_wrapper #content .block.dark {background:url(images/content_black_dark_bg.png) top left;} #content_wrapper #content .block.black {background: #000000;} #content_wrapper #content .block.empty {padding: 5px;} #content_wrapper #content .block h3 {font-size: 22px; font-weight: normal; margin: 0 0 20px 0;} #content_wrapper #content .block h4 {font-size: 18px; font-weight: normal; margin: 0 0 15px 0;} #content_wrapper #content #blogcontent .block h4 {font-size: 18px; font-weight: bold; margin: 0 0 15px 0;} #content_wrapper #content #blogcontent .block ol.commentlist li h4 {font-size: 16px; font-weight: normal; margin: 0 0 10px 70px;} #content_wrapper #content .block h5 {font-size: 14px; font-weight: normal; font-style: normal; font-weight: bold; color: #FFF; margin: 0 0 5px 0;} #content_wrapper #content .block p {font-size: 14px; line-height: 30px; margin: 0 0 20px 0; color: #AAA;} #content_wrapper #content .block p.last {margin: 0;} #content_wrapper #content .block p.long {margin: 0 0 40px 0;} #content_wrapper #content .block p a:hover {border-bottom: 1px dotted #daffc8;} #content_wrapper #content .block span a:hover {border-bottom: 1px dotted #daffc8;} #content_wrapper #content .block a.screencast.espionage {float: right; margin: 0 0 0 50px; display: block; background: url(images/screencast_espionage_bg.png) top right no-repeat; width: 250px; height: 183px;} #content_wrapper #content .block a.screencast.espionage:hover {background-position: 0 -183px; border: none;} #content_wrapper #content .block a.screencast span {display: none;} #content_wrapper #content .block p em, #content_wrapper #content .block p i {font-style: italic; color: #FFF; line-height: 30px;} #content_wrapper #content .block p strong, #content_wrapper #content .block p b {font-weight: bold; color: #FFF; line-height: 30px;} #content_wrapper #content .red {color: #FF0000;} #content_wrapper #content .blue {color: #1785CD;} #content_wrapper #content .box {border: 1px dashed #000; padding: 15px; background:url(images/content_black_dark_bg.png) top left; color: #EEE !important;} /*#content_wrapper #content .block blockquote { padding: 0 20px 0 60px; background: url(/includes/css/images/blockquote_bg_alpha.png) no-repeat left top; }*/ /*#content_wrapper #content .block blockquote { padding: 20px 20px 1px 30px; border-left: 1px solid #f3f3f3; background-color: #232323; margin-bottom: 15px; margin-top: 10px; }*/ #content_wrapper #content .block blockquote { padding: 20px 30px 1px; background-color: #232323; margin-bottom: 20px; margin-top: 10px; margin-left: -30px; margin-right: -30px; } #content_wrapper #content .block blockquote p { color: white; font-style: italic; font-family: Georgia, Times; } #content_wrapper #content .block blockquote.oneliner { background-color: black; } #content_wrapper #content #blogcontent center { margin-bottom: 20px; } #content_wrapper #content #blogcontent blockquote.oneliner p { color: #DAFFC8; font-family: Georgia, Times; font-size: 15px; text-align: center; line-height: 30px; } #content_wrapper #content #blogcontent blockquote.oneliner p.author { color: #DAFFC8; text-align: right; font: normal 15px/0 Georgia, Times; } #content_wrapper #content .block p.message {text-align: center; font-size: 20px; color: #DAFFC8; line-height: 34px; font-family: Georgia;} #content_wrapper #content .block .icon {display: block; width: 50px; height: 50px; float: left; margin: 0 25px 20px 0;} #content_wrapper #content .block .icon.folder {background: url(images/icon_folder.png) top left no-repeat;} #content_wrapper #content .block .icon.lock {background: url(images/icon_lock.png) top left no-repeat;} #content_wrapper #content .block .icon.backup {background: url(images/icon_backup.png) top left no-repeat;} #content_wrapper #content .block .icon.group {background: url(images/icon_group.png) top left no-repeat;} #content_wrapper #content .block .icon.growl {background: url(images/icon_growl.png) top left no-repeat;} #content_wrapper #content .block .icon.spotlight {background: url(images/icon_spotlight.png) top left no-repeat;} #content_wrapper #content .block .icon.yingyang {background: url(images/icon_yingyang.png) top left no-repeat;} #content_wrapper #content .block .icon.finder {background: url(images/icon_finder.png) top left no-repeat;} #content_wrapper #content .block .icon.application {background: url(images/icon_application.png) top left no-repeat;} #content_wrapper #content .block .icon.keychain {background: url(images/icon_keychain.png) top left no-repeat;} #content_wrapper #content .block .icon.clock {background: url(images/icon_clock.png) top left no-repeat;} #content_wrapper #content .block .icon.bundle {background: url(images/icon_bundle.png) top left no-repeat;} #content_wrapper #content .block .wide .icon {margin: 0; height: 24px; width: 24px;} #content_wrapper #content .block .wide .icon.folder {background: url(images/icon_folder_small.png) top left no-repeat;} #content_wrapper #content .block .wide .icon.lock {background: url(images/icon_lock_small.png) top left no-repeat;} /*#content_wrapper #content .block .wide .icon.backup {background: url(images/icon_backup_small.png) top left no-repeat;}*/ /*#content_wrapper #content .block .wide .icon.group {background: url(images/icon_group_small.png) top left no-repeat;}*/ #content_wrapper #content .block .wide .icon.growl {background: url(images/icon_growl_small.png) top left no-repeat;} #content_wrapper #content .block .wide .icon.spotlight {background: url(images/icon_spotlight_small.png) top left no-repeat;} #content_wrapper #content .block .wide .icon.yingyang {background: url(images/icon_yingyang_small.png) top left no-repeat;} #content_wrapper #content .block .wide .icon.finder {background: url(images/icon_finder_small.png) top left no-repeat;} #content_wrapper #content .block .wide .icon.keychain {background: url(images/icon_keychain_small.png) top left no-repeat;} #content_wrapper #content .block .wide .icon.clock {background: url(images/icon_clock_small.png) top left no-repeat;} #content_wrapper #content .block .wide .icon.bundle {background: url(images/icon_bundle_small.png) top left no-repeat;} #content_wrapper #content .block .wide .icon.backup {background: url(images/icon_backup_small.png) top left no-repeat;} #content_wrapper #content .block table {margin: 0 0 30px 0; width: 100%;} #content_wrapper #content .block table tr {} #content_wrapper #content .block table tr th {background:url(images/content_black_dark_bg.png) top left; padding: 10px 7px 10px 7px; font-size: 12px; text-align: center; font-weight: bold;} #content_wrapper #content .block table tr th.nobg {background: none; font-size: 12px; text-align: left; color: #999;} #content_wrapper #content .block table tr th.sub {text-align: left; font-size: 12px; padding: 7px; color: #999; font-weight: normal; width: 100px; font-style: italic;} #content_wrapper #content .block table tr td {padding: 5px 14px 5px 7px; font-size: 11px; line-height: 16px;} #content_wrapper #content .block table tr.alt th {font-weight: bold; background: #222222;} #content_wrapper #content .block table tr.alt td {background: #333;} #content_wrapper #content .block table tr.selected th {background: #1373b1; color: #FFF; font-weight: bold; border-top: 1px solid #7bbcff;} #content_wrapper #content .block table tr.selected td {background: #1785cd; border-top: 1px solid #7bbcff;} #content_wrapper #content .block table caption {text-align: right; font-size: 11px; font-style: italic; font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; margin: 0 0 10px 0; padding: 0;} .newin2 {background: url(images/newBadge.gif) top left no-repeat; display: block; height: 11px; width: 24px; float: left; margin: 2px 13px 0 0;} .newin2 span {display: none;} .wide .newin2 {margin: 4px 13px 0 0;} .clear {clear: both;} .hide {display: none;} #content_wrapper #content ul.screencasts {} #content_wrapper #content ul.screencasts li {float: left; margin: 0 20px 0 0 !important; text-align: center;} #content_wrapper #content ul.screencasts li.last {margin: 0 40px 0 0 !important;} #content_wrapper #content ul.screencasts li.end {margin: 0 !important;} #content_wrapper #content ul.screencasts li a {display: block; background: url(images/screencast.png) top left no-repeat; width: 140px; height: 131px;} #content_wrapper #content ul.screencasts li a:hover {background-position: 0 -131px;} #content_wrapper #content ul.screencasts li img {margin: 5px 0 0 1px;} #content_wrapper #content ul.screencasts li span {display: none;} #content_wrapper #content a.watchScreencast {display: block; background: url(images/watchScreencast_bg.png) top left no-repeat; width: 138px; height: 41px; margin: 20px 0 0 0;} #content_wrapper #content a.watchScreencast:hover {background-position: 0 -41px; border: none;} #content_wrapper #content a.watchScreencast:active {background-position: 0 -82px;} #content_wrapper #content a.watchScreencast span {display: none;} #content_wrapper #content ul.featureList {} #content_wrapper #content ul.featureList li {font-size: 14px; width: 350px; float: left; margin: 0 40px 40px 0;} #content_wrapper #content ul.featureList li h4 {font-size: 16px; margin: 0 0 10px 0;} #content_wrapper #content ul.featureList li p {font-size: 12px; line-height: 25px; color: #AAA;} #content_wrapper #content ul.featureList li.right {margin-right: 0;} #content_wrapper #content ul.featureList li.bottom {margin-bottom: 0;} #content_wrapper #content ul.featureList li p em, #content_wrapper #content ul.featureList li p i {line-height: 25px;} #content_wrapper #content ul.featureList li p b, #content_wrapper #content ul.featureList li p strong {line-height: 25px;} #content_wrapper #content ul.featureList li.wide {width: 100%; margin-bottom: 25px;} #content_wrapper #content ul.featureList li.wide.bottom {margin-bottom: 0} #content_wrapper #content ul.featureList li.wide h4 {margin: 0 10px 0 40px;} #content_wrapper #content ul.featureList li.wide h4 span {font-size: 12px; line-height: 22px; color: #AAA; margin-left: 10px;} #content_wrapper #content ul.featureList li.wide p {margin: 0 0 0 75px;} #content_wrapper #content .magnifyingGlass {background: url(images/magnifyingGlass.png) top left no-repeat; display: block; width: 14px; height: 14px; float: left; margin: 1px 12px 0 0;} #content_wrapper #content .magnifyingGlass span {display: none;} #content_wrapper #content .magnifyingGlass:hover {background-position: 0 -14px;} #content_wrapper #content .magnifyingGlass:active {background-position: 0 -28px;} #content_wrapper #content .wide .magnifyingGlass {margin-top: 2px;} #content_wrapper #content ul.imageList {} #content_wrapper #content ul.imageList li {display: inline; float: left;} #content_wrapper #content ul.imageList li a {display: block; background: url(images/imageList_bg.png) top left no-repeat; width: 155px; height: 116px; margin: 0 40px 0 0; border-bottom: 2px solid #000;} #content_wrapper #content ul.imageList li.right a {margin-right: 0;} #content_wrapper #content ul.imageList li a img {margin: 5px 5px 0 5px;} #content_wrapper #content .appBlock {padding: 0;} #content_wrapper #content .appBlock h4 {font-size: 18px; margin: 0 0 10px 0;} #content_wrapper #content .appBlock h4 span {font-size: 14px; color: #999;} #content_wrapper #content .appBlock a {font-size: 14px;} #content_wrapper #content .buyBlock {float: right; text-align: right; width: 250px;} #content_wrapper #content .buyBlock h4 {font-size: 30px; text-align: right; font-family: Georgia; margin: -10px 0 8px 0;} #content_wrapper #content .buyBlock h4 a {color: #FFF; font-size: 30px;} #content_wrapper #content .buyBlock a {font-size: 14px;} #content_wrapper #content .buyBlock h4 span.small {font-size: 11px; color: #999; font-family: Helvetica, Arial;} #content_wrapper #content ul.faq {width: 360px; float: left; margin: 10px 20px 0 0;} #content_wrapper #content ul.faq.left {} #content_wrapper #content ul.faq.right {margin-right: 0px;} #content_wrapper #content ul.faq li {margin: 0; padding: 0 0 0 30px; color: #999; background: url(images/li_circle_bg.gif) 0px 1px no-repeat;} #content_wrapper #content ul.faq li.first {margin-top: 40px;} #content_wrapper #content ul.faq li.last {margin-bottom: 0;} #content_wrapper #content ul.faq li h4 {font-size: 14px; margin: 0 0 20px 0; line-height: 20px;} /* #content_wrapper #content ul.faq li .answer {background: url(images/content_black_dark_bg.png) top left; border: 1px dashed #000; color: #EEE; padding: 15px;} */ #content_wrapper #content ul.faq li p {font-size: 12px; line-height: 18px; color: #999;} #content_wrapper #content ul.faq li .box {margin: 0 0 30px 0;} #content_wrapper #content .screencast {text-align: center;} #content_wrapper #content .screencast .video {margin: 0 auto; margin-bottom: 40px; width: 640px; height: 495px; display: block; z-index: 0;} #content_wrapper #content .screencast h3 {text-align: center;} #content_wrapper #content .screencast p {text-align: center;} #content_wrapper #content .screencast ul.screencasts {text-align: center; margin: 0 auto; padding: 40px 0 20px 0; width: 305px; height: 131px;} #content_wrapper #content .screencast ul.screencasts li {margin: 0;} #content_wrapper #content .screencast ul.screencasts li.last {padding-right: 0 !important;} #content_wrapper #content #contact {float: right; width: 300px; background:url(images/content_black_dark_bg.png) top left; margin: -30px -30px 40px 40px; padding: 30px 20px 20px 20px;} #content_wrapper #content #contact h3 {background: url(images/icon_mail.png) top left no-repeat; padding: 3px 0 0 40px; margin-top: -3px;} #content_wrapper #content #contact ul {margin: 0 0 20px 0;} #content_wrapper #content #contact ul li {font-size: 12px; line-height: 18px;} #content_wrapper #content #contact ul li h4 {font-size: 12px; font-weight: bold; line-height: 18px;} #content_wrapper #content #contact p {font-size: 12px; line-height: 18px; margin: 0 0 0 0;} #content_wrapper #content ul.company_listing {} #content_wrapper #content ul.company_listing li {font-size: 14px; width: 350px; float: left; margin: 0 40px 40px 0;} #content_wrapper #content ul.company_listing li h4 {font-size: 16px; margin: 0 0 10px 120px;} #content_wrapper #content ul.company_listing li h5 {font-size: 14px; margin: 0 0 15px 120px; color: #999;} #content_wrapper #content ul.company_listing li p {font-size: 12px; line-height: 25px; color: #AAA; margin-left: 120px !important;} #content_wrapper #content ul.company_listing li.right {margin-right: 0;} #content_wrapper #content ul.company_listing li.bottom {margin-bottom: 0;} #content_wrapper #content ul.company_listing li .profile_picture {background: url(images/profile_bg.png) top left no-repeat; width: 100px; height: 100px; float: left;} #content_wrapper #content ul.company_listing li .profile_picture img {margin: 2px 0 0 2px;} #content_wrapper.popup {width:400px; padding: 5px;} #content_wrapper.popup #content {margin: 0; } /* ------------------------------------------ */ /* -------------- LEGACY FORM --------------- */ /* ------------------------------------------ */ #content_wrapper #content form.legacyForm {} #content_wrapper #content form.legacyForm ul.left {float: left; width: 350px;} #content_wrapper #content form.legacyForm ul.right {float: right; width: 350px;} #content_wrapper #content form.legacyForm ul li {float: left; display: inline !important; list-style: none !important; margin: 0 0 15px 0 !important; padding: 0 0 15px 0 !important; background: none !important;} #content_wrapper #content form.legacyForm ul li label {float: left; width: 100%; margin: 0 0 10px 0; font-size: 14px; color: #999;} #content_wrapper #content form.legacyForm ul li .input_wrapper {float: left; width: 740px; height: 56px; margin: 0; padding: 0; background: url(images/form_input_bg.png) top left no-repeat; text-align: center;} #content_wrapper #content form.legacyForm ul li .input_wrapper.active {background-position: 0 -56px !important;} #content_wrapper #content form.legacyForm ul li .input_wrapper.active input {color: #FFF; outline: none;} #content_wrapper #content form.legacyForm ul li .input_wrapper.small {background: url(images/form_input_bg_small.png) top left no-repeat; width: 350px;} #content_wrapper #content form.legacyForm ul li input {width: 320px; border: none; line-height: 20px; font-size: 20px; color: #999; text-align: center; margin: 17px 0 0 0; background: none; font-family: Helvetica, Arial, Verdana, sans-serif; outline: none;} #content_wrapper #content form.legacyForm ul li.last {margin-bottom: 0 !important; padding-bottom: 0 !important;} #content_wrapper #content form.legacyForm ul li .input_wrapper.tiny {background: url(images/form_input_bg_tiny.png) top left no-repeat; width: 350px; height: 36px;} #content_wrapper #content form.legacyForm ul li .input_wrapper.tiny.active {background-position: 0 -36px !important;} #content_wrapper #content form.legacyForm ul li .input_wrapper.tiny input {font-size: 14px; line-height: 14px; margin: 10px 0 0 0;} #content_wrapper #content form.legacyForm ul li .input_wrapper.tiny.half {width: 180px; background-position: 0 -71px;} #content_wrapper #content form.legacyForm ul li .input_wrapper.tiny.half.active {background-position: 0 -107px !important;} #content_wrapper #content form.legacyForm ul li .input_wrapper.tiny.half input {width: 150px;} #content_wrapper #content form.legacyForm ul li .input_wrapper.selectbox {position: relative; background: url(images/form_selectbox_bg_small.png) top left no-repeat;} #content_wrapper #content form.legacyForm ul li .input_wrapper.selectbox:hover {background-position: 0 -56px;} #content_wrapper #content form.legacyForm ul li .input_wrapper.selectbox span {display: block; width: 320px; border: none; line-height: 20px; font-size: 20px; color: #999; text-align: center; margin: 17px 0 0 0; background: none; font-family: Helvetica, Arial, Verdana, sans-serif; outline: none;} #content_wrapper #content form.legacyForm ul li .input_wrapper.selectbox select {width: 350px; height: 56px; opacity: 0; font-size: 20px; color: #999; text-align: center; position: absolute; top: 0px; left: 0px; float: left; border: none;} #content_wrapper #content form.legacyForm ul li .input_wrapper.selectbox select option {background: #060606; border: none; padding: 0; margin: 0; padding: 10px;} #content_wrapper #content form.legacyForm ul li .input_wrapper.selectbox select option.alt {background: url(images/content_black_dark_bg.png) top left;} #content_wrapper #content form.legacyForm ul li .input_wrapper.selectbox select option:hover {background: #DAFFC8; color: #FFF;} #content_wrapper #content form.legacyForm ul li .textarea_wrapper {float: left; width: 740px; margin: 0; padding: 0; background: url(images/form_textarea_bg.png) top left repeat-y; text-align: center;} #content_wrapper #content form.legacyForm ul li .textarea_wrapper .top {height: 17px; width: 740px; background: url(images/form_textarea_top_bg.png) top left no-repeat;} #content_wrapper #content form.legacyForm ul li .textarea_wrapper .bottom {height: 17px; width: 740px; background: url(images/form_textarea_bottom_bg.png) bottom left no-repeat;} #content_wrapper #content form.legacyForm ul li .textarea_wrapper.active {background: url(images/form_textarea_bg_active.png) top left repeat-y !important;} #content_wrapper #content form.legacyForm ul li .textarea_wrapper.active .top {background-position: bottom left !important;} #content_wrapper #content form.legacyForm ul li .textarea_wrapper.active .bottom {background-position: bottom left !important;} #content_wrapper #content form.legacyForm ul li .textarea_wrapper.active textarea {color: #FFF; outline: none;} #content_wrapper #content form.legacyForm ul li .textarea_wrapper.small {background: url(images/form_textarea_bg_small.png) top left repeat-y; width: 350px;} #content_wrapper #content form.legacyForm ul li .textarea_wrapper.small .top {height: 17px; width: 350px; background: url(images/form_textarea_top_bg_small.png) top left no-repeat;} #content_wrapper #content form.legacyForm ul li .textarea_wrapper.small .bottom {height: 17px; width: 350px; background: url(images/form_textarea_bottom_bg_small.png) top left no-repeat;} #content_wrapper #content form.legacyForm ul li .textarea_wrapper.small.active {background: url(images/form_textarea_bg_small_active.png) top left repeat-y !important;} #content_wrapper #content form.legacyForm ul li textarea {width: 320px; height: 241px; margin: 0 15px 0 15px; padding: 0; border: none; font-size: 16px; line-height: 22px; font-family: Helvetica, Arial, Verdana, sans-serif; background: none; color: #999; outline: none;} #content_wrapper #content form.legacyForm ul li .textarea_wrapper.wide {background: url(images/form_textarea_bg_wide.png) top left repeat-y; width: 740px;} #content_wrapper #content form.legacyForm ul li .textarea_wrapper.wide .top {height: 17px; width: 740px; background: url(images/form_textarea_top_bg_wide.png) top left no-repeat;} #content_wrapper #content form.legacyForm ul li .textarea_wrapper.wide .bottom {height: 17px; width: 740px; background: url(images/form_textarea_bottom_bg_wide.png) top left no-repeat;} #content_wrapper #content form.legacyForm ul li .textarea_wrapper.wide.active {background: url(images/form_textarea_bg_wide_active.png) top left repeat-y !important;} #content_wrapper #content form.legacyForm ul li .textarea_wrapper.wide textarea {width: 710px; height: 241px; margin: 0 15px 0 15px; padding: 0; border: none; font-size: 16px; line-height: 22px; font-family: Helvetica, Arial, Verdana, sans-serif; background: none; color: #999; outline: none;} #content_wrapper #content form.legacyForm ul li p.subtext {clear: left; font-size: 10px; color: #999; margin: 0; padding: 10px 0 0 0; line-height: 10px;} #content_wrapper #content form.legacyForm .buttons {height: 56px; clear: both;} #content_wrapper #content form.legacyForm .buttons button.submit {background: url(images/form_button_submit.png) top left no-repeat; width: 105px; height: 56px; margin: 0 0 0 0; padding: 0; float: right;} #content_wrapper #content form.legacyForm .buttons button.submit:hover {background-position: 0 -56px; border: none;} #content_wrapper #content form.legacyForm .buttons button.submit:active, #content_wrapper #content form .buttons button.submit:focus {background-position: 0 -112px; border: none;} #content_wrapper #content form.legacyForm .buttons .submit {background: url(images/form_button_submit.png) top left no-repeat; width: 105px; height: 56px; margin: 0 0 0 0; padding: 0; float: right; border: none;} #content_wrapper #content form.legacyForm .buttons .submit:hover {background-position: 0 -56px; border: none;} #content_wrapper #content form.legacyForm .buttons .submit:active, #content_wrapper #content form .buttons button.submit:focus {background-position: 0 -112px; border: none;} #content_wrapper #content form.legacyForm .buttons .skip {background: url(images/form_button_skip.png) top left no-repeat; width: 96px; height: 56px; margin: 0 0 0 0; padding: 0; float: right; border: none;} #content_wrapper #content form.legacyForm .buttons .skip:hover {background-position: 0 -56px; border: none;} #content_wrapper #content form.legacyForm .buttons .skip:active, #content_wrapper #content form .buttons button.submit:focus {background-position: 0 -112px; border: none;} #content_wrapper #content form.legacyForm .buttons .buy {background: url(images/form_button_buy.png) top left no-repeat; width: 143px; height: 56px; margin: 0 0 0 0; padding: 0; float: right; border: none;} #content_wrapper #content form.legacyForm .buttons .buy:hover {background-position: 0 -56px; border: none;} #content_wrapper #content form.legacyForm .buttons .buy:active, #content_wrapper #content form .buttons button.submit:focus {background-position: 0 -112px; border: none;} #content_wrapper #content form.legacyForm .buttons.center {text-align: center;} #content_wrapper #content form.legacyForm .buttons.center .submit {margin: 0 auto; float: none;} #content_wrapper #content form.legacyForm .buttons.center .skip {margin: 0 auto; float: none;} #content_wrapper #content form.legacyForm .buttons.center .buy {margin: 0 auto; float: none;} #content_wrapper #content form.legacyForm input.discount {background: url(images/form_button_discount.png) top left no-repeat; width: 165px; height: 56px; margin: 0 0 0 0; padding: 0; float: left; border: none;} #content_wrapper #content form.legacyForm input.discount:hover {background-position: 0 -56px; border: none; cursor: pointer;} #content_wrapper #content form.legacyForm input.discount:active, #content_wrapper #content form input.submit:focus {background-position: 0 -112px; border: none;} #content_wrapper #content form.legacyForm input.discount.inline {margin-left: 10px;}#content_wrapper #content form ul li p.subtext {} #content_wrapper #content form span.error { font-style: italic; color: #970000;} #content_wrapper #content form span.success { font-style: italic; color: #81c934;} #content_wrapper #content form.lightboxForm label {width: 100%;} #content_wrapper #content form.lightboxForm input {} #content_wrapper #content form.lightboxForm .buttons {clear: none; float: left; margin: 0 0 0 20px;} #content_wrapper #content form.lightboxForm ul li {margin: 0; padding: 0;} #content_wrapper #content form.lightboxForm label {color: #FFF; font-weight: bold; font-size: 14px; line-height: 25px; width: 100%; margin: 0 0 0 0;} #content_wrapper #content form.lightboxForm .input_wrapper {background: #FFF; display: block; height: 30px; width: 340px; margin: 0 0 15px 0;} #content_wrapper #content form.lightboxForm input.textbox {background: none; display: block; width: 330px; border: none; font-size: 18px; line-height: 18px; padding: 7px 0 0 5px; font-family: Helvetica, Arial, Verdana, sans-serif;} #content_wrapper #content form.lightboxForm input.submit {float: left; display: block; height: 25px; width: 60px; font-family: Helvetica, Arial, Verdana, sans-serif; font-weight: bold;} #content_wrapper #content .forgotSerial {padding: 0; margin: 0;} #content_wrapper #content .forgotSerial input.findSerial {background: url(images/form_button_serial.png) top left no-repeat; width: 101px; height: 36px; margin: 0 0 0 0; padding: 0; float: left; border: none;} #content_wrapper #content .forgotSerial input.findSerial:hover {background-position: 0 -36px; border: none; cursor: pointer;} #content_wrapper #content .forgotSerial input.findSerial:active, #content_wrapper #content form input.submit:focus {background-position: 0 -72px; border: none;} #content_wrapper #content .forgotSerial input.findSerial.inline {margin-left: 10px;} #content_wrapper #content .forgotSerial input.getLicense {background: url(images/form_button_license.png) top left no-repeat; width: 106px; height: 36px; margin: 0 0 0 0; padding: 0; float: left; border: none;} #content_wrapper #content .forgotSerial input.getLicense:hover {background-position: 0 -36px; border: none; cursor: pointer;} #content_wrapper #content .forgotSerial input.getLicense:active, #content_wrapper #content form input.submit:focus {background-position: 0 -72px; border: none;} #content_wrapper #content .forgotSerial input.getLicense.inline {margin-left: 10px;} #content_wrapper #content .forgotSerial input.resend {background: url(images/form_button_resend.png) top left no-repeat; width: 82px; height: 36px; margin: 0 0 0 0; padding: 0; float: left; border: none;} #content_wrapper #content .forgotSerial input.resend:hover {background-position: 0 -36px; border: none; cursor: pointer;} #content_wrapper #content .forgotSerial input.resend:active, #content_wrapper #content form input.submit:focus {background-position: 0 -72px; border: none;} #content_wrapper #content .forgotSerial input.resend.inline {margin-left: 10px;} #content_wrapper #content .newsletter {padding: 0; margin: 0;} #content_wrapper #content .newsletter input.signup {background: url(images/form_button_signup.png) top left no-repeat; width: 86px; height: 36px; margin: 0 0 0 0; padding: 0; float: left; border: none;} #content_wrapper #content .newsletter input.signup:hover {background-position: 0 -36px; border: none; cursor: pointer;} #content_wrapper #content .newsletter input.signup:active, #content_wrapper #content form input.submit:focus {background-position: 0 -72px; border: none;} #content_wrapper #content .newsletter input.signup.inline {margin-left: 10px;} #content_wrapper #content .newsletterIcon {background: url(images/icon_newsletter.png) top left no-repeat; display: block; width: 44px; height: 35px; float: left; margin: 88px 0 0 -79px;} /* ------------------------------------------ */ /* ---------------- NEW FORM ---------------- */ /* ------------------------------------------ */ #content_wrapper #content form .label {font-size: 13px; color: #666; margin: 0 0 8px 0;} #content_wrapper #content form .label.active {color: #87CC2E} #content_wrapper #content form .label.hover {color: #AAA} #content_wrapper #content form .label.hover.active {color: #87CC2E} #content_wrapper #content form .label.error {color:#A31515;} #content_wrapper #content form .label.error.hover {color: #C63232;} #content_wrapper #content form .label.error.active {color: #FFF;} #content_wrapper #content form .label.error.hover.active {color: #FFF;} #content_wrapper #content form .fakeLabel {clear:both; font-size: 13px; color: #666; margin: 25px 0 8px 0;} #content_wrapper #content form .fakeLabel.error {color:#8A1212;} #content_wrapper #content form h3 {color: #87CC2E; font-size: 18px; margin: 0 0 30px 0;} #content_wrapper #content form h3.short {margin-bottom: 5px !important;} #content_wrapper #content form p {color: #999; font-size: 12px; margin: 0 0 30px 0; line-height: 18px;} #content_wrapper #content form p.last {margin: 0;} #content_wrapper #content form .sublabel {font-size: 13px; color: #999; margin: 0 0 25px 0; line-height: 14px;} #content_wrapper #content form .sublabel.last {margin-bottom: 0;} /* ------------------ INPUT ----------------- */ .input_wrapper {background: url(images/form_inputwrapper_bg.png) top right no-repeat; height: 36px; margin: 0 0 25px 0;} .input_wrapper .cap {background: url(images/form_inputwrapper_cap.png) top left no-repeat; height: 26px; padding: 5px 8px 5px 8px;} .input_wrapper input {border: none; background: none; font-size: 16px; color: #999; margin: 0; height: 22px; padding: 3px 0 0 0; line-height: 25px; width: 100%; font-family: "Lucida Grande", Verdana, Arial, sans-serif; } .input_wrapper input:focus {color: #FFF;} .input_wrapper:hover {background-position: right -36px;} .input_wrapper:hover .cap {background-position: 0 -36px;} .input_wrapper:hover input {color: #FFF;} .input_wrapper.active {background-position: right -72px;} .input_wrapper.active .cap {background-position: 0 -72px;} .input_wrapper.active input {color: #FFF; text-shadow: 0px 2px 2px #4c6611;} .input_wrapper.active input:focus {} .input_wrapper.active:hover {background-position: right -108px;} .input_wrapper.active:hover .cap {background-position: 0 -108px;} .input_wrapper.active:hover input {} .input_wrapper.error {background-position: right -144px;} .input_wrapper.error .cap {background-position: 0 -144px;} .input_wrapper.error input {color: #F7A8A8;} .input_wrapper.error input:focus {color: #FFF;} .input_wrapper.error:hover {background-position: right -180px;} .input_wrapper.error:hover .cap {background-position: 0 -180px;} .input_wrapper.error:hover input {color: #FFF;} .input_wrapper.error.active {background-position: right -216px;} .input_wrapper.error.active .cap {background-position: 0 -216px;} .input_wrapper.error.active input {} .input_wrapper.error.active:hover {background-position: right -252px;} .input_wrapper.error.active:hover .cap {background-position: 0 -252px;} .input_wrapper.error.active:hover input {} .input_wrapper.error.active:hover input:focus {} .input_wrapper.var_size {float: left; margin: 0 10px 0 0;} .input_wrapper.extra {margin: 0;} .input_wrapper.last {margin: 0;} .input_wrapper.multiline {margin: 0 0 5px 0;} /* ---------------- SELECTBOX --------------- */ .input_wrapper.selectbox {position: relative; background-image: url(images/form_selectbox_bg.png);} .input_wrapper.selectbox select {width: 100%; height: 100%; margin: 0; padding: 0; border: none; background: none; -moz-opacity:0; filter:alpha(opacity:0); opacity:0; position: absolute; top: 0px; left: 0px; font-size: 25px; line-height: 25px; color: #222; font-family: "Lucida Grande", Verdana, Arial, sans-serif;} .input_wrapper.selectbox select option {padding: 5px 6px 5px 6px; font-size: 13px; background: #FFF;} .input_wrapper.selectbox span {font-size: 16px; color: #999; margin: 0; height: 22px; padding: 3px 0 0 0; line-height: 25px; width: 100%; font-family: "Lucida Grande", Verdana, Arial, sans-serif;} .input_wrapper.selectbox:hover {background-position: right -36px;} .input_wrapper.selectbox:hover span {color: #FFF;} .input_wrapper.selectbox.active.press {background-position: right -72px;} .input_wrapper.selectbox.active.press span {color: #FFF; text-shadow: 0px 2px 2px #4C6611;} .input_wrapper.selectbox.active.press .cap {background-position: 0 -36px;} .input_wrapper.selectbox.active {background-position: right -108px;} .input_wrapper.selectbox.active span {color: #FFF; text-shadow: 0px 2px 2px #4C6611;} .input_wrapper.selectbox.active .cap {background-position: 0 -72px;} .input_wrapper.selectbox.active:hover {background-position: right -144px;} .input_wrapper.selectbox.active:hover span {color: #FFF;} .input_wrapper.selectbox.active:hover .cap {background-position: 0 -108px;} .input_wrapper.selectbox.active.press:hover {background-position: right -180px;} .input_wrapper.selectbox.active.press:hover span {color: #FFF;} .input_wrapper.selectbox.active.press:hover .cap {background-position: 0 -108px;} .input_wrapper.selectbox.error {background-position: right -216px;} .input_wrapper.selectbox.error span {color: #F7A8A8;} .input_wrapper.selectbox.error:hover {background-position: right -252px;} .input_wrapper.selectbox.error:hover span {color: #FFF;} .input_wrapper.selectbox.error.active.press {background-position: right -288px;} .input_wrapper.selectbox.error.active.press .cap {background-position: 0 -180px;} .input_wrapper.selectbox.error.active.press span {color: #FFF; text-shadow: 0px 2px 2px #410606;} .input_wrapper.selectbox.error.active {background-position: right -324px;} .input_wrapper.selectbox.error.active .cap {background-position: 0 -216px;} .input_wrapper.selectbox.error.active span {color: #FFF; text-shadow: 0px 2px 2px #410606;} .input_wrapper.selectbox.error.active:hover {background-position: right -360px;} .input_wrapper.selectbox.error.active:hover .cap {background-position: 0 -216px;} .input_wrapper.selectbox.error.active:hover span {color: #FFF;} .input_wrapper.selectbox.error.active.press:hover {background-position: right -396px;} .input_wrapper.selectbox.error.active.press:hover .cap {background-position: 0 -216px;} .input_wrapper.selectbox.error.active.press:hover span {color: #FFF;} /* ---------------- TEXT AREA --------------- */ .textarea_wrapper {width: 100%; font-family: "Lucida Grande", Verdana, Arial, sans-serif;} .textarea_wrapper .top {background: url(images/form_inputwrapper_bg.png) top right no-repeat; height: 8px;} .textarea_wrapper .top .cap {background: url(images/form_inputwrapper_cap.png) top left no-repeat; height: 8px;} .textarea_wrapper .bottom {background: url(images/form_inputwrapper_bg.png) right -28px no-repeat; height: 8px;} .textarea_wrapper .bottom .cap {background: url(images/form_inputwrapper_cap.png) 0 -28px no-repeat; height: 8px;} .textarea_wrapper .inner {background: url(images/form_textarea_normal_bg.png) top right;} .textarea_wrapper .inner .cap {background: url(images/form_textarea_normal_cap.png) top left repeat-y; height: 100px; padding: 0 8px 0 8px;} .textarea_wrapper .inner textarea {font-family: "Lucida Grande", Verdana, Arial, sans-serif; border: none; background: none; font-size: 16px; color: #999; margin: 0; padding: 0; line-height: 25px; width: 100%; height: 100px; overflow-x: hidden;} .textarea_wrapper .inner textarea:focus {color: #FFF;} .textarea_wrapper:hover .top {background-position: right -36px;} .textarea_wrapper:hover .top .cap {background-position: 0 -36px;} .textarea_wrapper:hover .bottom {background-position: right -64px;} .textarea_wrapper:hover .bottom .cap {background-position: 0 -64px;} .textarea_wrapper:hover .inner {background: url(images/form_textarea_normal_hover_bg.png) top right;} .textarea_wrapper:hover .inner .cap {background: url(images/form_textarea_normal_hover_cap.png) top left repeat-y;} .textarea_wrapper:hover .inner textarea {color: #FFF;} .textarea_wrapper.active .top {background-position: right -72px;} .textarea_wrapper.active .top .cap {background-position: 0 -72px;} .textarea_wrapper.active .bottom {background-position: right -100px;} .textarea_wrapper.active .bottom .cap {background-position: 0 -100px;} .textarea_wrapper.active .inner {background: url(images/form_textarea_active_bg.png) top right;} .textarea_wrapper.active .inner .cap {background: url(images/form_textarea_active_cap.png) top left repeat-y;} .textarea_wrapper.active .inner textarea {color: #FFF; text-shadow: 0px 2px 2px #4c6611;} .textarea_wrapper.active:hover .top {background-position: right -108px;} .textarea_wrapper.active:hover .top .cap {background-position: 0 -108px;} .textarea_wrapper.active:hover .bottom {background-position: right -136px;} .textarea_wrapper.active:hover .bottom .cap {background-position: 0 -136px;} .textarea_wrapper.active:hover .inner {background: url(images/form_textarea_active_hover_bg.png) top right;} .textarea_wrapper.active:hover .inner .cap {background: url(images/form_textarea_active_hover_cap.png) top left repeat-y;} .textarea_wrapper.active:hover .inner textarea {} .textarea_wrapper.error .top {background-position: right -144px;} .textarea_wrapper.error .top .cap {background-position: 0 -144px;} .textarea_wrapper.error .bottom {background-position: right -172px;} .textarea_wrapper.error .bottom .cap {background-position: 0 -172px;} .textarea_wrapper.error .inner {background: url(images/form_textarea_error_bg.png) top right;} .textarea_wrapper.error .inner .cap {background: url(images/form_textarea_error_cap.png) top left repeat-y;} .textarea_wrapper.error .inner textarea {color: #F7A8A8;} .textarea_wrapper.error .inner textarea:focus {color: #FFF;} .textarea_wrapper.error:hover .top {background-position: right -180px;} .textarea_wrapper.error:hover .top .cap {background-position: 0 -180px;} .textarea_wrapper.error:hover .bottom {background-position: right -208px;} .textarea_wrapper.error:hover .bottom .cap {background-position: 0 -208px;} .textarea_wrapper.error:hover .inner {background: url(images/form_textarea_error_hover_bg.png) top right;} .textarea_wrapper.error:hover .inner .cap {background: url(images/form_textarea_error_hover_cap.png) top left repeat-y;} .textarea_wrapper.error:hover .inner textarea {color: #FFF;} .textarea_wrapper.error.active .top {background-position: right -216px;} .textarea_wrapper.error.active .top .cap {background-position: 0 -216px;} .textarea_wrapper.error.active .bottom {background-position: right -244px;} .textarea_wrapper.error.active .bottom .cap {background-position: 0 -244px;} .textarea_wrapper.error.active .inner {background: url(images/form_textarea_error_active_bg.png) top right;} .textarea_wrapper.error.active .inner .cap {background: url(images/form_textarea_error_active_cap.png) top left repeat-y;} .textarea_wrapper.error.active .inner textarea {} .textarea_wrapper.error.active:hover .top {background-position: right -252px;} .textarea_wrapper.error.active:hover .top .cap {background-position: 0 -252px;} .textarea_wrapper.error.active:hover .bottom {background-position: right -280px;} .textarea_wrapper.error.active:hover .bottom .cap {background-position: 0 -280px;} .textarea_wrapper.error.active:hover .inner {background: url(images/form_textarea_error_active_hover_bg.png) top right;} .textarea_wrapper.error.active:hover .inner .cap {background: url(images/form_textarea_error_active_hover_cap.png) top left repeat-y;} .textarea_wrapper.error.active:hover .inner textarea {} /* ------------------ RADIO ----------------- */ .radio_wrapper {height: 35px; margin: 0 0 25px 0;} .radio_wrapper li {float: left;} .radio_wrapper li .radio {display: block; height: 35px; width: 20px; margin: 0 5px 0 0 !important; float: left;} #content_wrapper #content form .radio_wrapper li .label {display: block; height: 35px; margin: 0 30px 0 0; float: left; line-height: 35px; font-size: 14px; color: #999;} .radio_wrapper li.last {margin: 0 !important;} .radio_wrapper li input {width: 15px; height: 15px; margin: 10px 0 0 0; padding: 0;} .radio_wrapper.last {margin: 0;} #content_wrapper #content form .radio_wrapper li .label.last {margin-right: 0;} #content_wrapper #content form .radio_wrapper li .label.error {color: #A31515;} /* ---------------- CHECK BOXES -------------- */ .checkbox_wrapper {height: 35px; margin: 0 0 25px 0;} .checkbox_wrapper li {float: left;} .checkbox_wrapper li .checkbox {display: block; height: 35px; width: 20px; margin: 0 5px 0 0 !important; float: left;} #content_wrapper #content form .checkbox_wrapper li .label {display: block; height: 35px; margin: 0 30px 0 0; float: left; line-height: 35px; font-size: 14px; color: #999;} .checkbox_wrapper li.last {margin: 0;} .checkbox_wrapper li input {width: 15px; height: 15px; margin: 9px 0 0 0; padding: 0;} .checkbox_wrapper.last {margin: 0;} #content_wrapper #content form .checkbox_wrapper li .label.last {margin-right: 0;} #content_wrapper #content form .checkbox_wrapper li .label.error {color: #A31515;} /* ----------------- BUTTONS ---------------- */ .buttons .middle {text-align: center; margin: 0 auto;} .buttons.left {text-align: left; margin: 0 auto;} .buttons.alignLeft {text-align: left;} .buttons button {border: none; background: none; overflow: visible; padding: 0;} .buttons button div {display: block; float: left; height: 46px; padding: 0 20px 0 0; white-space: nowrap; background: url(images/form_button.png) top right no-repeat; font-size: 14px; font-family: "Lucida Grande", Verdana, Arial, sans-serif; white-space:nowrap;} .buttons button span {background: url(images/form_button.png) top left no-repeat #FFF; font-size: 14px; display: block; padding: 0 0 0 20px; height: 46px; line-height: 44px; font-weight: bold; float: left; white-space:nowrap; clear:none; color: #333; text-shadow: 0px 1px 0px #FFF;} .buttons button:hover div {background-position: right -46px;} .buttons button:hover span {background-position: 0 -46px; color: #333; text-shadow: 0px 1px 0px #FFF;} .buttons button:active, .buttons button:focus {outline: none;} .buttons button:active div {background-position: right -92px} .buttons button:active span {background-position: 0 -92px; color: #343919; text-shadow: 0px 1px 0px #dadec0;} .buttons button.inactive {opacity: .3; filter: alpha(opacity = .3);} .buttons button.blue div {background-position: right -138px;} .buttons button.blue span {background-position: 0px -138px; color: #FFF; text-shadow: 0 -1px 0px #2A6184;} .buttons button.blue:hover div {background-position: right -184px;} .buttons button.blue:hover span {background-position: 0px -184px; color: #FFF; text-shadow: 0 -1px 0px #2A6184;} .buttons button.blue:active div {background-position: right -230px;} .buttons button.blue:active span {background-position: 0px -230px; color: #FFF; text-shadow: 0 -1px 0px #2A6184;} /* ------------------------------------------ */ /* --------------- ORDER FORM --------------- */ /* ------------------------------------------ */ .checkout {display: block; width: 220px; height: 50px; background: url(images/checkout_bg.png) top left no-repeat;} .checkout:hover {background-position: 0 -50px;} .checkout:active {background-position: 0 -100px;} .checkout.active {background-position: 0 -150px;} .checkout a {display: block; width: 220px; height: 50px; text-align: center;} .checkout a:hover {} .checkout a span {width: 100%; text-align: center; position: relative; top: 60px; color: #666;} .checkout.active a span {color: #FFF;} .checkout.creditcard a {background: url(images/checkout_options.png) 0px 0px no-repeat;} .checkout.paypal a {background: url(images/checkout_options.png) 0px -50px no-repeat;} .checkout.google a {background: url(images/checkout_options.png) 0px -100px no-repeat;} .packagePicker {margin: 0;} .packagePicker .column.left {width: 128px;} .packagePicker .column.right {width: 572px;} .packagePicker .appIcon {width: 128px; height: 128px; background: red;} .packagePicker .radio_wrapper { width: 410px; margin-left: 30px; } .packagePicker.business .radio_wrapper { margin-left: 0; width: 572px; } .packagePicker .radio_wrapper li {clear: left; width: 100%; margin: 0 0 5px 0;} .packagePicker .radio_wrapper .columnheader { display: block; width: 50px; float: right; text-align: right; margin: 0; color: #87CC2E; } .packagePicker.business .radio_wrapper .columnheader { margin: 0 0 10px 20px; } .packagePicker .radio_wrapper .columnheader.left { text-align: left; float: left; margin-left: 30px; width: 300px; } .packagePicker .radio_wrapper .label {line-height: 36px !important; color: #FFF !important;} .packagePicker .radio_wrapper .quantity {display: block; height: 35px; width: 45px; float: right;} .packagePicker .radio_wrapper .price { display: block; height: 35px; line-height: 32px; float: right; font-size: 13px; } .packagePicker.business .radio_wrapper .price { font-size: 18px; line-height: 40px; padding-right: 25px; } .packagePicker .radio_wrapper .input_wrapper input {height: 22px; margin: 0; padding: 3px 0 0 0; width: 100%; text-align: center;} .packagePicker .radio_wrapper li.disabled .label, .packagePicker .radio_wrapper li.disabled .price {filter:alpha(opacity=35); -moz-opacity:0.35; -khtml-opacity: 0.35; opacity: 0.35;} .packagePicker .radio_wrapper li.disabled .input_wrapper {filter:alpha(opacity=35); -moz-opacity:0.35; -khtml-opacity: 0.35; opacity: 0.35;} .packagePicker.espionage .appIcon {background: url(images/appIcon_espionage.png) top left no-repeat;} .packagePicker .radio_wrapper li .label { left: 5px; /* 20px wide checkbox + 5px margin */ position: relative; margin-left: 0; } .packagePicker .radio_wrapper li .description { color: #999999; left: 30px; position: relative; width: 400px; line-height: 15px; font-size: .9em; } .couponCode {display: block; width: 150px; float: left; margin: 0 90px 0 0;} .couponCode h4 {font-size: 14px !important; color: #87CC2E; margin: 0 0 5px 0 !important;} .couponCode a.refreshTotal {font-size: 13px !important; color: #FFF; margin: 15px 0 0 0 !important; clear: left; float: left; padding: 0 0 0 24px; line-height: 16px; background: url(images/refreshTotal.gif) top left no-repeat;} .couponCode a.refreshTotal:hover {color: #87CC2E;} table.ordersummary {margin: 0 !important; float: left; width: 500px !important;} table.ordersummary tr {} table.ordersummary tr td {font-size: 13px !important; border-top: 1px solid #222; line-height: 24px !important;} table.ordersummary tr td.description {text-align: right;} table.ordersummary tr td.price {width: 60px; text-align: right;} table.ordersummary tr.footer td {font-size: 18px !important; border-top: 3px solid #87CC2E; line-height: 32px !important;} table.ordersummary tr.footer td.description {color: #87CC2E;} table.ordersummary tr.footer td.price {} /* ------------------------------------------ */ /* -------------- TESTIMONIALS -------------- */ /* ------------------------------------------ */ ul.testimonials {margin: 0;} ul.testimonials li.testimony {margin: 0 0 70px 0;} ul.testimonials li.testimony .quote {font-style: italic; line-height: 24px !important; color: #AAA; padding: 0 10px 0 10px !important; background: url(images/testismony_top.png) top left repeat-x; margin: 0 !important;} ul.testimonials li.testimony .quote b {line-height: 24px !important;} ul.testimonials li.testimony .person {font-size: 14px; margin: 20px 0 5px 0 !important; line-height: 14px !important; padding: 15px 0 0 45px; color: #FFF !important; font-weight: bold; background: url(images/testimony_bottom.png) top left no-repeat;} ul.testimonials li.testimony .company {font-size: 14px; margin: 0 !important; line-height: 14px !important; padding: 0 0 0 45px; color: #FFF;} ul.testimonials li.testimony .company a {font-style: italic;} ul.testimonials li.testimony .title {font-size: 12px; font-style: italic; color: #999; font-weight: normal;} /* --------------------------- */ /* ----------- News ---------- */ /* --------------------------- */ #newsBar {background: url(images/newsBar_bg_alt.png) top left no-repeat; width: 800px; height: 31px; margin: 0 auto; margin-bottom: 20px; padding: 5px;} #newsBar h2 {display: block; float: left; height: 20px; width: 92px; line-height: 20px; padding: 0 10px 0 10px; color: #3f4e2d; font-weight: bold; background: #a3da52; border-top: 1px solid #d6f5be;} #newsBar .news {display: block; float: left; height: 20px; width: 655px; line-height: 20px; padding: 0 10px 0 10px; color: #FFF; font-weight: normal; text-align: center; border-top: 1px solid #000;} #newsBar .news a {color: #FFF; line-height: 20px;} #headline {width: 790px; height: 21px; margin: 0 auto; margin-bottom: 20px; padding: 5px; border-top: 1px solid #333; border-bottom: 1px solid #333; background:url(images/content_black_dark_bg.png) top left;} /* --------------------------- */ /* ---------- Footer --------- */ /* --------------------------- */ #footer {width: 800px; margin: 0 auto; margin-top: 20px; margin-bottom: 20px; text-align: center; color: #333;} #footer p {text-align: center; margin-bottom: 3px;} #footer a {color: #555;} #footer a:hover {color: #DAFFC8; border-bottom: 1px dotted #daffc8;} #footer h4.logo a {display: block; height: 30px; width: 88px; margin: 0 auto; margin-bottom: 5px; background: url(images/footer_taoEffect.png) top center no-repeat;} #footer h4.logo a:hover {background-position: 0 -30px; border: none;} #footer h4.logo a span {display: none;} #jwah a {background: url(images/jwah.png) top right no-repeat; position: fixed; bottom: 0; right: 0; height: 50px; width: 50px;} #jwah a:hover {border: none; background-position: 0 -50px;} #jwah a span {display: none;}