/*-----------------------------------------------------------------------------------------------*/ /* CLIENT WEB PRO */ /*-----------------------------------------------------------------------------------------------*/ /*-----------------------------------------------------------------------------------------------*/ /* CSS RESET (MODIFIED VERSION OF YAHOO UI CSS RESET) */ /*-----------------------------------------------------------------------------------------------*/ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin: 0;padding:0;} table {border-collapse:collapse; border-spacing:0;} fieldset,img { border:0;} address,caption,cite,code,dfn,em,strong,th,var {font-style:normal; font-weight:normal;} ol,ul {list-style:none;} caption,th {text-align:left;} h1,h2,h3,h4,h5,h6 {font-size:100%; font-weight:normal;} q:before,q:after {content:'';} abbr,acronym {border:0;} img {border: none; text-decoration: none;} *:focus {outline: none;} /*-----------------------------------------------------------------------------------------------*/ /* FONTS */ /*-----------------------------------------------------------------------------------------------*/ body{font:13px/1.5 Arial, Helvetica, sans-serif} a:focus{outline:1px dotted invert} hr{border:0 #ccc solid;border-top-width:1px;clear:both;height:0} h1{font-size:1.6em; font-weight: bold; color: #0091c7;} h2{font-size:1.4em; font-weight: bold;} h3{font-size:1.2em; font-weight: bold;} h4{font-size:1.2em} h5{font-size:1.1em} h6{font-size:1em} ol{list-style:decimal} ul{list-style:disc} li{margin-left:30px} p,dl,hr,ol,ul,pre,table,address,fieldset{margin-bottom:15px} h1,h2,h3,h4,h5,h6 {margin-bottom:5px} strong {font-weight: bold;} a {text-decoration: none; color: inherit; font-size: inherit;} a:hover {text-decoration: underline; color: inherit;} /*-----------------------------------------------------------------------------------------------*/ /* CLASSES */ /*-----------------------------------------------------------------------------------------------*/ .clear {clear: both; height: 0px; font-size: 0px; line-height: 0px; padding: 0px; margin: 0px;} body {background: url(images/bg.png) repeat-x top;} /*#wrapper {width: 778px; margin: auto;}*/ #wrapper {width: 960px; margin: auto;} .edit #wrapper {width: 960px; margin: auto;} #header {height: 154px; background: transparent url(images/header.png) no-repeat;} #header #home-link {width: 350px; height: 154px; float: left; text-indent: -5000px;} #header #header-menu {width: 350px; height: 94px; color: #FFF; padding: 60px 0 0 0; float: right; text-align: right;} #header #header-menu a {margin: 0 5px;} #header #header-menu a:hover {color: #FF9900; text-decoration: none;} #header #header-menu h3 {color: #FF9900; margin: 5px 0; padding-right: 45px} #menu { height: 30px; background: #0091C7; line-height: 30px; color: #FFF; text-align: right; padding: 0 15px; font-size: 1.2em;} #menu a {margin: 0 10px;} #menu a:hover {color: #FF9900; text-decoration: none;} #main {background: #FFF; overflow: hidden; padding-bottom: 20px;} #main-top {margin-bottom: 15px;} #content {margin: 5px 40px; overflow: hidden;} #footer {text-align: center; color: #333; font-size: .9em; padding: 10px 0;} #footer a {text-decoration: underline;} #footer a:hover {color: #FFF} /*-----------------------------------------------------------------------------------------------*/ /* FORMS */ /*-----------------------------------------------------------------------------------------------*/ .formDiv {width: 500px; overflow: hidden; margin-bottom: 10px; color: #585858;} .formDiv label { display: block; width: 170px; height: 35px; color: #8f8f8f; font-weight: bold; font-size: .8em; line-height: 1.4em; text-align: right; float: left; margin-right: 10px;} .formDiv label span {display: block; color: #333333; font-size: 1.4em;} .formDiv input.inputStyle {width: 276px; height: 17px; float: left; padding: 6px; border: solid 1px #b7b7b7;} .formDiv select.inputStyle {width: 289px; float: left; padding: 6px 6px 5px 6px; border: solid 1px #b7b7b7;} .formDiv .textareaStyle {width: 276px; height: 100px; float: left; padding: 6px; border: solid 1px #b7b7b7;} .domainSelect input.inputStyle {width: 200px;} .domainSelect select.inputStyle {width: 76px;} .domainSearch input.inputStyle {width: 200px;} .domainSearch input.buttonStyle {width: 76px; height: 30px;} .emailSelect {width: 600px;} .emailSelect input.emailDomain {width: 116px; text-align: right; border-right: none; padding-right: 0;} .emailSelect input.emailDomainExt {width: 160px; text-align: left; background: #FFF; padding-left: 0; border-left: none;} .expirationDate select.inputStyle {width: 100px;} /*-----------------------------------------------------------------------------------------------*/ /* SIGNUP PROCESS */ /*-----------------------------------------------------------------------------------------------*/ .get-started { border-bottom: solid 1px #e9e5e6; background: transparent url(images/theme-selection-bg.png) repeat-x bottom;} .process-btn {text-align: center; margin: 25px 0;} .verify-info {margin: 15px; padding: 10px; float: left;} .verify-info ul {color: #333333; font-size: 1.2em; font-weight: bold; list-style: none; margin: 0px; padding: 0px;} .verify-info ul li {margin: 0px; padding: 0px;} a.edit {color: #ff9934; font-weight: bold; font-size: 1.2em;} .theme-selection { padding: 10px; overflow: hidden; width: 280px; float: left; margin: 15px;} .theme-selection .preview {position: relative; width: 280px; float: left; margin-right: 10px;} .theme-selection img { position: relative; z-index: 2; border: solid 1px #cacaca; float: left;} .theme-selection ul { position: absolute; right: 0px;} .theme-selection ul li { cursor: pointer; position: relative; z-index: 1; width: 142px; display: block; border: solid 1px #cacaca; padding: 3px 5px 3px 18px; border-bottom: none;} .theme-selection ul li.last {border-bottom: solid 1px #cacaca;} .theme-selection ul li:hover, .theme-selection ul li.active {background: #f8f8f8; z-index: 500;} .theme-selection .info {width: 240px; float: right;} #content .theme-selection h3, #content .theme-selection p {border: none; color: #7b7b7b;} #content .theme-selection h3 {margin-bottom: 5px;} #content .theme-selection p {} #content .theme-selection a.activate-theme { display: block; width: 140px; height: 30px; line-height: 30px; color: #FFF; text-decoration: none; text-align: center; border: solid 1px #959595; background-repeat: repeat-x;} #middle #content div.theme-selection div.info a.activate-theme:hover {color: #FFF !important; border: solid 1px #BFBFBF;} #content .theme-selection a.active {background-image: url(images/btn-active-bg.png);} #content .theme-selection a.inactive {background-image: url(images/btn-inactive-bg.png);} /*-----------------------------------------------------------------------------------------------*/ /* EDIT HEADER */ /*-----------------------------------------------------------------------------------------------*/ #edit-menu { height: 24px; border-bottom: solid 3px #FF9A0F; margin-bottom: 2px; line-height: 24px; color: #FFF; text-align: right; padding: 0 15px; font-size: 1.2em;} #edit-menu ul {list-style: none;} #edit-menu ul li {height: 24px; line-height: 24px;float: left; margin: 0 3px;} #edit-menu ul li a {height: 24px; line-height: 24px; float: left; display: block; background: #2E9AC8; padding: 0 10px;} #edit-menu ul li a:hover, #edit-menu ul li a.active {background: #FF9A0F; text-decoration: none;} .previewFrame {border: none; width: 100%; height: 400px;} .launch-link {width: 210px; float: right; text-align: center; padding-top: 35px; font-size: .8em; font-weight: bold;} .launch-link p {margin: 10px 0 0 0;} #asides {width: 208px; float: left;} #asides ul {list-style: none; margin: 15px 0 25px 0;} #asides li {border-bottom: solid 1px #d8d8d8; display: block; height: 32px; line-height: 32px; margin-left: 10px; text-align: right;} #asides li a {line-height: inherit; color: #333; font-weight: bold; font-size: .85em;} #asides li a:hover {text-decoration: none;} #asides li h2 {font-size: 1em; text-align: left; padding-left: 10px;} #asides li a.pageLink {padding-left: 10px; float: left; text-align: left; width: 160px; display: block;} #asides li a.pageLink:hover {background: transparent url(images/aside-a-bg-hover.png) repeat-y left;} #asides li a.active {background: transparent url(images/aside-a-bg.png) repeat-y left;} #asides li a.arrow {position: relative; top: 10px; float: left; display: block; width: 14px; height: 14px; background-position: right; background-repeat: no-repeat;} #asides li a.arrow:hover {background-position: left;} #asides li a.down {background-image: url(images/arrows-down.png);} #asides li a.up {background-image: url(images/arrows-up.png);} #asides li a.spaceLeft {left: 14px;} #edit-content {width: 712px; float: right; padding: 15px 20px 15px 0;} #edit-content h1 {padding-bottom: 17px; background: transparent url(images/divider.png) no-repeat bottom;} #edit-content p.note { padding: 15px; color: #333; font-size: .85em; border: solid 1px #ffdcab; background: transparent url(images/msg-bg.png) repeat-x bottom;} #edit-content p.option { padding: 15px; color: #333; font-size: .85em; background: #F7F7F7;} #edit-content a {text-decoration: underline; color: #0091C7;} #edit-content a:hover {color: #FF9A0F;} /*-----------------------------------------------------------------------------------------------*/ /* COLORBOX POPUP STYLES */ /*-----------------------------------------------------------------------------------------------*/ /* ColorBox Core Style The following rules are the styles that are consistant between themes. Avoid changing this area to maintain compatability with future versions of ColorBox. */ #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;} #cboxOverlay{position:fixed; width:100%; height:100%;} #cboxMiddleLeft, #cboxBottomLeft{clear:left;} #cboxContent{position:relative; overflow:hidden;} #cboxLoadedContent{overflow:auto;} #cboxLoadedContent iframe{display:block; width:100%; height:100%; border:0;} #cboxTitle{margin:0;} #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;} #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;} /* ColorBox example user style The following rules are ordered and tabbed in a way that represents the order/nesting of the generated HTML, so that the structure easier to understand. */ #cboxOverlay{background:#fff;} #colorBox{} #cboxTopLeft{width:25px; height:25px; background:url(images/colorbox-images/border1.png) 0 0 no-repeat;} #cboxTopCenter{height:25px; background:url(images/colorbox-images/border1.png) 0 -50px repeat-x;} #cboxTopRight{width:25px; height:25px; background:url(images/colorbox-images/border1.png) -25px 0 no-repeat;} #cboxBottomLeft{width:25px; height:25px; background:url(images/colorbox-images/border1.png) 0 -25px no-repeat;} #cboxBottomCenter{height:25px; background:url(images/colorbox-images/border1.png) 0 -75px repeat-x;} #cboxBottomRight{width:25px; height:25px; background:url(images/colorbox-images/border1.png) -25px -25px no-repeat;} #cboxMiddleLeft{width:25px; background:url(images/colorbox-images/border2.png) 0 0 repeat-y;} #cboxMiddleRight{width:25px; background:url(images/colorbox-images/border2.png) -25px 0 repeat-y;} #cboxContent{background:#fff;} #cboxLoadedContent{margin-bottom:20px;} #cboxTitle{position:absolute; bottom:0px; left:0; text-align:center; width:100%; color:#999;} #cboxCurrent{position:absolute; bottom:0px; left:100px; color:#999;} #cboxSlideshow{position:absolute; bottom:0px; right:42px; color:#444;} #cboxPrevious{position:absolute; bottom:0px; left:0; color:#444;} #cboxNext{position:absolute; bottom:0px; left:63px; color:#444;} #cboxLoadingOverlay{background:url(images/colorbox-images/loading.gif) 5px 5px no-repeat #fff;} #cboxClose{position:absolute; bottom:0; right:0; display:block; color:#444;} /* The following fixes png-transparency for IE6. It is also necessary for png-transparency in IE7 & IE8 to avoid 'black halos' with the fade transition Since this method does not support CSS background-positioning, it is incompatible with CSS sprites. Colorbox preloads navigation hover classes to account for this. !! Important Note: AlphaImageLoader src paths are relative to the HTML document, while regular CSS background images are relative to the CSS document. */ .cboxIE #cboxTopLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/colorbox-images/internet_explorer/borderTopLeft.png, sizingMethod='scale');} .cboxIE #cboxTopCenter{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/colorbox-images/internet_explorer/borderTopCenter.png, sizingMethod='scale');} .cboxIE #cboxTopRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/colorbox-images/internet_explorer/borderTopRight.png, sizingMethod='scale');} .cboxIE #cboxBottomLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/colorbox-images/internet_explorer/borderBottomLeft.png, sizingMethod='scale');} .cboxIE #cboxBottomCenter{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/colorbox-images/internet_explorer/borderBottomCenter.png, sizingMethod='scale');} .cboxIE #cboxBottomRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/colorbox-images/internet_explorer/borderBottomRight.png, sizingMethod='scale');} .cboxIE #cboxMiddleLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/colorbox-images/internet_explorer/borderMiddleLeft.png, sizingMethod='scale');} .cboxIE #cboxMiddleRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/colorbox-images/internet_explorer/borderMiddleRight.png, sizingMethod='scale');} /*-----------------------------------------------------------------------------------------------*/ /* STYLES PULLED OVER FROM OLD-STYLES.CSS */ /*-----------------------------------------------------------------------------------------------*/ .text12 {font-size : 12pt;} .textOrange {color : #ff9900;} .textGrey {color : #595959;} /*.textRed {COLOR : #cc0000;}*/ .orangetitle { font-size: 1.6em; font-weight: bold; color: #ff9900; line-height: 20pt;} .greybody { font-sizw: 1.2em; color: #999999;} .bluebody { font-sizw: 1.2em; color: #0099cc;} /*-----------------------------------------------------------------------------------------------*/ /* INDEX STYLES */ /*-----------------------------------------------------------------------------------------------*/ #index {color:#4d4d4d;} #index #pageImage img {width:960px; height:237px;} #index #sideContent {padding-top:30px; float:left; text-align:right; width:552px;} #index #sideContent ul {font-size:1.2em; list-style:none;} #index #mainContent {float:left; padding:30px 50px; width:300px;} #index #mainContent p {font-size: 1.2em;} #index .floatingBox-left {float: left; width: 270px; padding: 0px 0px 15px 22px;} #index .floatingBox-center {float: left; width: 370px; padding: 0px 0px;} #index .floatingBox-right {float: left; width: 270px; padding: 0px 0px 15px 0px;} /*-----------------------------------------------------------------------------------------------*/ /* WEB FEATURES STYLES */ /*-----------------------------------------------------------------------------------------------*/ #web-features {color:#4d4d4d;} #web-features #pageImage img {float:none; width:960px; height:237px;} #web-features img {float:left; width:69px;} #web-features a {color: #0091c7;} #web-features .orangetitle {margin: 20px 0px 30px 0px; text-align:center;} #web-features .floatingBox-left {float: left; width: 256px; padding: 15px 0px 30px 64px;} #web-features .floatingBox-center {float: left; width: 256px; padding: 15px 32px 30px 32px;} #web-features .floatingBox-right {float: left; width: 256px; padding: 15px 64px 30px 0px;} #web-features .floatingBox-left div {float: left; width: 187px;} #web-features .floatingBox-center div {float: left; width: 187px;} #web-features .floatingBox-right div {float: left; width: 187px;} #web-features .contactInfo {text-align: center; padding: 15px 0px; font-size: 1.3em; font-weight: bold;} /*-----------------------------------------------------------------------------------------------*/ /* PRICING STYLES */ /*-----------------------------------------------------------------------------------------------*/ #pricing {color:#4d4d4d;} #pricing #pageImage img {width:960px; height:237px;} #pricing #mainContenttop {margin: 20px 40px 0 40px;} #pricing #mainContenttop #left-column {float: left; width: 432px; margin-top: 10px; margin-bottom: 10px;} #pricing #mainContenttop #left-column h1 {text-align: left;} #pricing #mainContenttop #left-column img {margin-left: 5 px; margin-bottom: 5px;} #pricing #mainContenttop #right-column {float: left; width: 448px; text-align: left; margin-top: 20px; margin-bottom: 10px;} #pricing #mainContenttop #right-column img {width:286px; height:164px;} #pricing #mainContent {margin: 10px 35px 0 35px;} #pricing #mainContent table {width:550px; float: right} #pricing #mainContent table thead, #pricing #mainContent table tfoot {background-color: #999999; color: #ffffff;} #pricing #mainContent table thead tr, #pricing #mainContent table tfoot tr {height: 1.7em; line-height: 1.7em;} #pricing #mainContent table tr {height: 1.6em; line-height: 36px;} #pricing #mainContent table tr.alt {background-color: #e4e4e4;} #pricing #mainContent table td {padding-left: 0px;} #pricing #mainContent table td.textRed {color : #cc0000; font-weight: bold; padding-top: 2px; padding-bottom: 2px;} #pricing #mainContent #table td img {padding-top: 5px; width: 15px; height: 15px; padding-right: 5px;} #pricing #mainContent #table span.textOrange {font-weight: bold;} #pricing #mainContent #benefits-column {float: left; width: 230px; margin-top: 50px; margin-bottom: 25px; margin-right:5} #pricing #mainContent #benefits-column h1 {text-align: left;} #pricing #mainContent #benefits-column .benefit {font-size: 1em; font-weight: bold} #pricing #mainContent #benefits-column .benefitalt {font-size: 1em; font-weight: normal; font-style: italic; color: #ff9900; padding: 25t surepx} #pricing #mainContent #benefits-column .comment {font-size: 1em; font-weight: normal; font-family:Georgia, "Times New Roman", Times, serif; color:#0099CC; padding-top: 30px} #pricing #mainContent #benefits-column .commentalt {font-size: .8em; text-align: right; font-weight: normal; color:#0099CC; font-family:Arial, Helvetica, sans-serif; padding-top: -10px; padding-bottom: 25px} /*-----------------------------------------------------------------------------------------------*/ /* FAQ STYLES */ /*-----------------------------------------------------------------------------------------------*/ #faq {color:#4d4d4d;} #faq #pageImage img {width:960px; height:237px;} #faq #mainContent {margin: 30px 60px 0 48px;} #faq #mainContent h3 {color: #0091c7;} #faq #mainContent a {color: #0091c7;} #faq #mainContent .contactInfo {text-align:center; padding: 15px 0px; font-size: 1.3em; font-weight: bold;} /*-----------------------------------------------------------------------------------------------*/ /* FREE TOOLS STYLES */ /*-----------------------------------------------------------------------------------------------*/ #freeTools {color:#4d4d4d;} #freeTools #pageImage img {width:960px; height:237px;} #freeTools #sideContent {padding-top:20px; padding-bottom:20px; padding-left: 15px; padding-right: 15px; float: right; width:210px; margin-left: 48; margin-top: 60px; margin-right: 48px; border: solid 1px #FF9900;} #freeTools #sideContent .formDiv {width:249px; text-align: left; color: #4d4d4d;} #freeTools #sideContent .formDiv label {text-align: left; height: 1em; line-height: 1em; font-size: 1em; float:none; margin-bottom: 3px; } #freeTools #sideContent .formDiv input.inputStyle {width: 180px; height: .6em; line-height: .6em; float:none; margin-bottom: 0;} #freeTools #sideContent .formDiv input.inputSubmit {width: 195px; margin-top: 5px;} #freeTools #sideContent p {font-style: italic;} #freeTools #sideContent h3 {font-size: 1.4em; color: #FF9900; font-weight:bold;} #freeTools #sideContent h4 {font-size: 1em; color: #999999; font-weight:700;} #freeTools #mainContent {float:left; padding:20px 30px 20px 30px; width:550px; margin-left: 20px; margin-right: 20px;} #freeTools #mainContent p, #freeTools #mainContent li {font-size: 1.2em;} /*-----------------------------------------------------------------------------------------------*/ /* THANK YOU PAGE */ /*-----------------------------------------------------------------------------------------------*/ #thankyou {color:#4d4d4d;} #thankyou #pageImage img {width:960px; height:237px;} #thankyou #sideContent {padding-top:20px; padding-bottom:20px; padding-left: 15px; padding-right: 15px; float: right; width:470px; margin-left: 48; margin-top: 50px; margin-right: 48px; margin-bottom: 100px; border: solid 1px #FF9900;} #thankyou #sideContent .formDiv {width:249px; text-align: left; color: #4d4d4d;} #thankyou #sideContent .formDiv label {text-align: left; height: 1em; line-height: 1em; font-size: 1em; float:none; margin-bottom: 3px; } #thankyou #sideContent .formDiv input.inputStyle {width: 180px; height: .6em; line-height: .6em; float:none; margin-bottom: 0;} #thankyou #sideContent .formDiv input.inputSubmit {width: 195px; margin-top: 5px;} #thankyou #sideContent p {font-style: italic; padding-left:: 20px; padding-right: 20px;} #thankyou #sideContent h3 {font-size: 1.4em; color: #FF9900; font-weight: bold; text-align: center;} #thankyou #sideContent h4 {font-size: 1em; color: #999999; font-weight:700;} #thankyou #mainContent {float:left; padding:60px 40px 30px 30px; width:300px; margin-left: 20px; margin-right: 20px;} #thankyou #mainContent p, #freeTools #mainContent li {font-size: 1.2em;}