/* ========= */ /* = reset = */ /* ========= */ html,body,div,span,object,iframe, h1,h2,h3,h4,h5,h6,p,blockquote,pre, abbr,address,cite,code, del,dfn,em,img,ins,kbd,q,samp, small,strong,sub,sup,var, b,i, dl,dt,dd,ol,ul,li, fieldset,form,label,legend, table,caption,tbody,tfoot,thead,tr,th,td, article,aside,canvas,details,figcaption,figure, footer,header,hgroup,menu,nav,section,summary, time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;} body{line-height:1;} article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section{display:block;} nav ul{list-style:none;} blockquote,q{quotes:none;} blockquote:before,blockquote:after, q:before,q:after{content:'';content:none;} a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;} ins{background-color:#ff9;color:#000;text-decoration:none;} mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold;} del{text-decoration:line-through;} abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help;} table{border-collapse:collapse;border-spacing:0;} hr{display:block;height:1px;border:0;border-top:1px solid #cccccc;margin:1em 0;padding:0;} input,select{vertical-align:middle;border:0;} textarea{border:0;} :focus{border:0;} /* =========== */ /* = website = */ /* =========== */ html, body{ background: #282a34; margin: 0; padding: 0; color: #999; font-weight: normal; font-style: normal; font: 14px/1 "SohoStdRegular"; text-decoration: none; } a, a:hover{ text-decoration: none; } ::selection{ background: #fff; color: #282a34; } ::-moz-selection{ background: #fff; color: #282a34; } ::-webkit-selection{ background: #fff; color: #282a34; } .clear { clear: both; } strong{ font-family: "SohoStdExtraBold"; } em{ font-family: "SohoStdItalic"; } .medium{ font-family: "SohoStdMedium"; } #container{ position: absolute; left: 50%; width: 960px; margin-left: -480px; } #container > div { width: 960px; } #bar{ height: 80px; position: fixed; top: 0; left: 50%; margin-left: -640px; z-index: 99; width: 1280px; background: transparent url("../images/menu-background.png") repeat scroll top left; } #bar-logo{ position: absolute; top: 22px; left: 176px; width: 217px; height: 41px; background: transparent url("../images/logo-menu.png") no-repeat scroll top left; } #menu{ position: absolute; right: 326px; top: 33px; } #menu a{ font: 14px/1 "SohoStdRegular"; color: #eaeaeb; position: relative; display: block; float: left; padding: 0 10px; height: 16px; overflow: hidden; } #menu span{ display: block; padding-bottom: 2px; } #menu .divider{ position: relative; display: block; float: left; } #menu .over{ color: #6690a3; } #twitter-bar{ width: 25px; height: 20px; position: absolute; background: transparent url("../images/social-twitter-header.png") no-repeat scroll 50% 100%; top: 27px; right: 246px; display: block; } #language{ position: absolute; right: 176px; top: 33px; } #language a{ font: 14px/1 "SohoStdRegular"; color: #eaeaeb; position: relative; display: block; float: left; padding: 0 2px; height: 15px; overflow: hidden; } #language span{ display: block; padding-bottom: 2px; } #language .divider{ position: relative; display: block; float: left; } #language .over{ color: #6690a3; } #claim{ height: 165px; position: relative; background-color: #212225; text-align: center; margin-top: 80px; } #claim h2, h3{ width: 100%; position: absolute; display: block; } #claim h2{ font: 46px/1 "SohoStdRegular"; color: #eaeaeb; top: 45px; letter-spacing: -1px; } #claim h3{ font: 15px/1 "SohoStdRegular"; color: #6690a3; top: 112px; } #showcase{ height: 622px; position: relative; } #bollonzo-best-value{ width: 101px; height: 100px; background: transparent url("../images/best-value.png") no-repeat scroll top left; position: absolute; top: 300px; left: 550px; z-index: 2 ; } #professional, #advanced, #business{ width: 298px; height: 561px; position: absolute; top: 30px; cursor: pointer; } .server-description{ width:298px; height: 59px; background-color: #151619; position: absolute; bottom: 0; } .server-description p{ font: 12px/1 "SohoStdRegular"; position: absolute; display: block; width: 100%; text-align: center; } .optimal-for{ color: #919299; top: 15px; } .optimal-for-what{ color: #eaeaeb; top: 34px; } .server-name, .server-name-detail, .server-price, .server-price-detail, .server-feature{ width: 100%; position: absolute; display: block; text-align: center; } .server-name, .server-name-detail{ font: 37px/1 "SohoStdMedium"; color: #eaeaeb; bottom: 82px; letter-spacing: -1px; } .server-price, .server-price-detail{ font: 23px/1 "SohoStdRegular"; color: #eaeaeb; bottom: 58px; letter-spacing: -1px; } .server-feature{ font: 12px/1 "SohoStdRegular"; color: #c3cfd6; bottom: 19px; } .server-feature span{ padding: 5px 2px 0 23px; } #professional{ left: 0; } #professional .server-tassello{ width:298px; height: 494px; position: absolute; background: #282a34 url("../images/showcase-server-professional.jpg") no-repeat scroll top center; overflow-y: hidden; } #professional .server-tassello > div{ width: 298px; height: 211px; position: absolute; bottom: 0; background: transparent url("../images/showcase-mask-professional.png") no-repeat scroll 0 0; } #professional .server-name, #professional .server-price, #professional .server-name-detail, #professional .server-price-detail{ color: #282a34; } #professional .server-feature{ color: #62636b; } #professional .server-feature strong{ font: 12px/1 "SohoStdRegular"; color: #333438; } #professional .server-feature .bandwidth{ background: transparent url("../images/professional-bandwidth-icon.png") no-repeat scroll left 5px; padding: 5px 0 5px 30px; margin-right: 10px; } #professional .server-feature .diskspace{ background: transparent url("../images/professional-diskspace-icon.png") no-repeat scroll left 3px; padding: 5px 0 5px 30px; } #professional .server-name-detail{ bottom: -40px; } #professional .server-price-detail{ bottom: -40px; } #advanced{ left: 330px; } #advanced .server-tassello{ width:298px; height: 494px; position: absolute; background: #282a34 url("../images/showcase-server-advanced.jpg") no-repeat scroll top center; overflow-y: hidden; } #advanced .server-tassello > div{ width: 298px; height: 211px; position: absolute; bottom: 0; background: transparent url("../images/showcase-mask-advanced.png") no-repeat scroll 0 0; } #advanced .server-feature strong{ font: 12px/1 "SohoStdRegular"; color: #DFF0FB; } #advanced .server-feature .bandwidth{ background: transparent url("../images/advanced-bandwidth-icon.png") no-repeat scroll left 5px; padding: 5px 0 5px 30px; margin-right: 10px; } #advanced .server-feature .diskspace{ background: transparent url("../images/advanced-diskspace-icon.png") no-repeat scroll left 3px; padding: 5px 0 5px 30px; } #advanced .server-name-detail{ bottom: -40px; } #advanced .server-price-detail{ bottom: -40px; } #business{ right: 0; width:298px; } #business .server-tassello{ width:298px; height: 494px; position: absolute; background: #282a34 url("../images/showcase-server-business.jpg") no-repeat scroll top center; overflow-y: hidden; } #business .server-tassello > div{ width: 298px; height: 211px; position: absolute; bottom: 0; background: transparent url("../images/showcase-mask-business.png") no-repeat scroll 0 0; } #business .server-feature strong{ font: 12px/1 "SohoStdRegular"; color: #DFF0FB; } #business .server-feature .bandwidth{ background: transparent url("../images/advanced-bandwidth-icon.png") no-repeat scroll left 5px; padding: 5px 0 5px 30px; margin-right: 10px; } #business .server-feature .diskspace{ background: transparent url("../images/advanced-diskspace-icon.png") no-repeat scroll left 3px; padding: 5px 0 5px 30px; } #business .server-name-detail{ bottom: -40px; } #business .server-price-detail{ bottom: -40px; } #cloud{ position: relative; } #cloud-title{ height: 182px; position: relative; background-color: #212225; text-align: center; } #cloud-title h2, h3, h4{ width: 100%; position: absolute; display: block; } #cloud-title h2{ font: 46px/1 "SohoStdRegular"; color: #eaeaeb; top: 36px; letter-spacing: -1px; } #cloud-title h3{ font: 28px/1 "SohoStdRegular"; color: #eaeaeb; top: 102px; letter-spacing: -1px; } #cloud-title strong{ font: 28px/1 "SohoStdRegular"; color: #e83e3e; } #cloud-title h4{ font: 15px/1 "SohoStdRegular"; color: #6690a3; top: 137px; } #cloud-title-arrow{ width: 106px; height: 52px; background: transparent url("../images/cloud-title-arrow.png") no-repeat scroll top center; position: absolute; top: 160px; left: 430px; } #the-cloud{ height: 730px; } .the-cloud-bollonzo canvas{ position: absolute; top: 10px; left: 10px; } .the-cloud-bollonzo{ width: 120px; height: 120px; position: absolute; z-index: 9; } .the-cloud-icon{ width: 120px; height: 120px; position: absolute; z-index: 10; } #the-cloud-bollo-1{ top: 422px; left: 10px; } #the-cloud-bollo-2{ top: 578px; left: 121px; } #the-cloud-bollo-3{ top: 698px; left: 282px; } #the-cloud-bollo-4{ top: 422px; left: 812px; } #the-cloud-bollo-5{ top: 578px; left: 712px; } #the-cloud-bollo-6{ top: 698px; left: 540px; } #the-cloud-icon-1{ top: 432px; left: 20px; background: transparent url('../images/the-cloud-icon-ruby.png') no-repeat scroll center top; } #the-cloud-icon-2{ top: 588px; left: 131px; background: transparent url('../images/the-cloud-icon-php.png') no-repeat scroll center top; } #the-cloud-icon-3{ top: 708px; left: 292px; background: transparent url('../images/the-cloud-icon-nodejs.png') no-repeat scroll center top; } #the-cloud-icon-4{ top: 432px; left: 822px; background: transparent url('../images/the-cloud-icon-mysql.png') no-repeat scroll center top; } #the-cloud-icon-5{ top: 588px; left: 722px; background: transparent url('../images/the-cloud-icon-couchdb.png') no-repeat scroll center top; } #the-cloud-icon-6{ top: 708px; left: 550px; background: transparent url('../images/the-cloud-icon-mongodb.png') no-repeat scroll center top; } #the-cloud-text{ position: absolute; top: 254px; background: transparent url("../images/the-cloud-text.gif") no-repeat scroll 0 0; width: 960px; height: 595px; z-index: 1; } #the-cloud-cloud{ position: absolute; top: 397px; left: 50%; margin-left: -155px; width: 311px; height: 213px; background: transparent url("../images/the-cloud.png") no-repeat scroll 0 0; z-index: 2; } #the-cloud-storage-engines{ position: absolute; top: 334px; left: 629px; width: 271px; height: 42px; background: transparent url("../images/the-cloud-storage-engines.png") no-repeat scroll 0 0; z-index: 3; } #the-cloud-technologies{ position: absolute; top: 326px; left: 94px; width: 237px; height: 54px; background: transparent url("../images/the-cloud-technologies.png") no-repeat scroll 0 0; z-index: 3; } #the-cloud-cdn{ position: absolute; top: 255px; left: 50%; margin-left: -40px; width: 81px; height: 109px; background: transparent url("../images/the-cloud-cdn.png") no-repeat scroll 0 0; z-index: 3; } #the-cloud-blup-dx{ position: absolute; top: 254px; background: transparent url("../images/the-cloud-blup-dx.png") no-repeat scroll 0 0; width: 960px; height: 595px; z-index: 1; } #the-cloud-blup-sx{ position: absolute; top: 254px; background: transparent url("../images/the-cloud-blup-sx.png") no-repeat scroll 0 0; width: 960px; height: 595px; z-index: 1; } #numbers{ position: relative; height: 216px; } #numbers-arrow{ width: 153px; height: 54px; background: transparent url("../images/numbers-arrow.png") no-repeat scroll top center; position: absolute; top: 0; left: 404px; z-index: 2; text-align: center; } #numbers-arrow p{ font: 14px/1 "SohoStdRegular"; color: #eaeaeb; width: 100%; display: block; position: absolute; top: 10px; } #counter-container{ height: 121px; position: relative; background-color: #212225; top: 35px; overflow-y: hidden; } .counter{ width: 100%; position: absolute; } .counter > div{ width: 960px; height: 121px; position: absolute; top: 121px; } .counter #hunziker{ top: 0; } .single-counter .counter-name{ font: 24px/1 "SohoStdMedium"; color: #eaeaeb; display: block; position: absolute; top: 48px; left: 30px; letter-spacing: -1px; } .single-counter .counter-arrow{ width: 11px; height: 21px; background: transparent url("../images/counter-arrow.png") no-repeat scroll top center; position: absolute; top: 52px; left: 314px; } .single-counter .counter-number{ font: 60px/1.2 "SohoStdMedium"; color: #eaeaeb; display: block; position: absolute; top: 24px; left: 332px; letter-spacing: -2px; text-align: center; width: 422px; } .single-counter .counter-service{ font: 15px/1.2 "SohoStdRegular"; color: #eaeaeb; display: block; position: absolute; top: 52px; left: 780px; padding-left: 47px; background: transparent url("../images/counter-accesses-icon.png") no-repeat scroll top left; width: 124px; } #plans{ position: relative; height: 359px; } #plans h2, h3{ position: absolute; display: block; } #plans h2{ font: 30px/1 "SohoStdMedium"; color: #eaeaeb; letter-spacing: -1px; left: 30px; } #plans h3{ font: 20px/1 "SohoStdItalic"; color: #c3c4c6; padding: 13px 37px 0 0; background: transparent url("../images/linux-based-servers.png") no-repeat scroll top right; width: 230px; height: 33px; right: 30px; } #plans #squares{ position: absolute; top: 73px; width: 960px; height: 239px; } #plans .square{ width:179px; height: 219px; background-color: #373941; position: absolute; top: 10px; text-align: center; border: 0 solid #373941; } #plans .square p{ font: 20px/1 "SohoStdMedium"; color: #c3c4c6; position: absolute; display: block; width: 100%; bottom: 25px; } #plans .square .square-icon{ width: 115px; height: 115px; position: absolute; top: 20px; left: 33px; z-index: 2; } #plans .square .square-icon-animation{ width: 115px; height: 115px; position: absolute; top: 20px; left: 33px; z-index: 1; background: transparent url("../images/square-icon-animation.png") no-repeat scroll 50% 0%; } #square-1{ left: 0; } #square-1 .square-icon{ background: transparent url("../images/square-icon-panel.png") no-repeat top center; } #square-2{ left: 196px; } #square-2 .square-icon{ background: transparent url("../images/square-icon-multi.png") no-repeat top center; } #square-3{ left: 392px; } #square-3 .square-icon{ background: transparent url("../images/square-icon-ftp.png") no-repeat top center; } #square-4{ left: 588px; } #square-4 > .square-icon{ background: transparent url("../images/square-icon-webmail.png") no-repeat top center; } #square-5{ left: 784px; } #square-5 > .square-icon{ background: transparent url("../images/square-icon-support.png") no-repeat top center; } #info{ position: relative; height: 325px; } #info-presentation{ position: absolute; width: 636px; height: 252px; color: #212225; background-color: #eaeaeb; } #info-presentation h2{ font: 25px/1 "SohoStdMedium"; letter-spacing: -1px; display: block; position: absolute; top: 30px; left: 54px; } #info-presentation p{ font: 18px/1.2 "SohoStdRegular"; display: block; width: 540px; position: absolute; top: 80px; left: 54px; } #info-twitter{ position: absolute; right: 0; width: 309px; height: 252px; color: #eaeaeb; background-color: #45464f; } #info-twitter h2{ font: 25px/1 "SohoStdMedium"; letter-spacing: -1px; display: block; position: absolute; top: 41px; left: 32px; } #info-twitter p{ font: 13px/1.3 "SohoStdItalic"; display: block; width: 242px; position: absolute; top: 74px; left: 32px; } #info-twitter span{ font: 14px/1 "SohoStdMedium"; display: block; position: absolute; top: 147px; left: 32px; color: #6690a3; } #info-twitter a{ position: absolute; left: 32px; top: 182px; display: block; background: transparent url("../images/info-twitter.png") no-repeat scroll right top; padding: 5px 37px 10px 0; font: 14px/1 "SohoStdRegular"; color: #eaeaeb; } #Pagos{ position: relative; height: 0px; } #info-pagos{ position: absolute; width: 957px; height: 180px; color: #212225; background-color: #eaeaeb; } #info-pagos h2{ font: 30px/1 "SohoStdMedium"; letter-spacing: -1px; display: block; position: absolute; top: 16px; left: 54px; } #info-pagos p{ font: 20px/1.2 "SohoStdRegular"; display: block; width: 540px; position: absolute; top: 62px; left: 54px; } #comparative{ position: relative; height: 680px; } #comparative h2, #comparative h3{ display: block; position: absolute; left: 30px; } #comparative h2{ font: 30px/1 "SohoStdMedium"; color: #eaeaec; top: 65px; letter-spacing: -1px; } #comparative h3{ font: 16px/1 "SohoStdRegular"; color: #9ca1a9; top: 106px; } #comparative .bollonzo{ width: 184px; height: 184px; position: absolute; text-align: center; } #comparative .bollonzo strong{ font: 31px/1 "SohoStdExtraBold"; letter-spacing: -1px; } #comparative .bollonzo em{ font: 9px/1 "SohoStdMedium"; } .bollonzo-background canvas{ position: absolute; top: 0; left: 0; } #comparative .bollonzo #bollonzo-background-white, #comparative .bollonzo #bollonzo-background-red, #comparative .bollonzo #bollonzo-background-blu{ position: absolute; top: -4px; left: -4px; width: 194px; height: 194px; z-index: 4; } .bollonzo h4, .bollonzo h5, .bollonzo h6{ display: block; width: 100%; position: absolute; color: white; z-index: 5; } .bollonzo h4{ top: 50px; font: 17px/1 "SohoStdRegular"; } .bollonzo h5{ top: 85px; font: 26px/1 "SohoStdMedium"; letter-spacing: -1px; } .bollonzo h6{ top: 118px; font: 14px/1 "SohoStdRegular"; } #comparative #bollonzo-white h4, #comparative #bollonzo-white h5, #comparative #bollonzo-white h6{ color: #282a34 !important; } #comparative #bollonzo-white{ left: 370px; } #comparative #bollonzo-blu{ left: 569px; } #comparative #bollonzo-red{ left: 768px; } #comparative-table{ position: absolute; width: 959px; top: 180px; font: 13px/1 "SohoStdRegular"; color: white; text-align: left; } #comparative-table div{ position: relative; width: 959px; border-right: 1px solid #282a34; height: 34px; } #comparative-table div.even{ background: #45464f; } #comparative-table div.odd{ background: #2f313a; } #comparative-table div > p{ position: relative; float: left; width: 197px; border-right: 1px solid #282a34; height: 34px; display: block; text-align: center; } #comparative-table .table-name{ padding-left: 30px; width: 334px; text-align: left; } #comparative-table span{ padding-top: 10px; display: block; } #comparative-table .ok-white{ background: transparent url("../images/table-v-sign-white.png") no-repeat scroll center 6px; display: block; width: 204px; height: 24px; padding-top: 0 !important; } #comparative-table .ok-blu{ background: transparent url("../images/table-v-sign-blu.png") no-repeat scroll center 6px; display: block; width: 204px; height: 24px; padding-top: 0 !important; } #comparative-table .ok-red{ background: transparent url("../images/table-v-sign-red.png") no-repeat scroll center 6px; display: block; width: 204px; height: 24px; padding-top: 0 !important; } #contact{ position: relative; height: 362px; margin-top: 225px;} #contact #location{ width: 390px; position: absolute; left: 30px; top: 33px; color: #eaeaeb; } #location h2,#location h3,#location p{ position: absolute; display: block; left: 0; } #location h2{ font: 24px/1 "SohoStdMedium"; top: 0; } #location h3{ font: 12px/1 "SohoStdRegular"; top: 27px; } #location h4{ font: 14px/1 "SohoStdRegular"; color: #9ca1a9; top: 25px; } #location p{ font: 14px/1.5 "SohoStdRegular"; top: 66px; } #location #location-follow-us{ position: absolute; top: 177px !important; display: block; background: transparent url("../images/info-twitter.png") no-repeat scroll right top; padding: 5px 37px 10px 0; font: 14px/1 "SohoStdRegular"; color: #eaeaeb; } #contact-form { display: block; position: absolute; width: 460px; height: 310px; left: 50%; top: 0; font: 14px/1.5 "SohoStdRegular"; } #contact-form label { display: block; position: relative; color: #6690a3; float: left; margin: 0 19px 25px 0; font-size: 18px; float: left; line-height: 20px; } #contact-form label span { display: block; color: #ccc; font-size: 12px; margin: 0 0 5px 0; } #contact-form label input{ display: block; padding: 2px 10px; color: #888; font: inherit; font: 12px/1 "SohoStdItalic"; } #contact-form textarea{ font: 12px/1 "SohoStdItalic"; } #contact-form label span.contact-error { display: block; width: 24px; height: 35px; position: absolute; top: 0; right: 0; color: #b30000; background: url('../images/contact-error.png') no-repeat; margin: 0; cursor: pointer; } #contact-form label span.contact-error span.contact-error-info { display: block; width: 174px; height: 55px; position: absolute; top: -55px; right: -74px; background: url('../images/contact-error-info.png') no-repeat; line-height: 47px; text-align: center; font-size: 11px; } #contact-form label#contact-name input { background: #373942; width: 200px; height: 25px; } #contact-form label#contact-email input { background: #373942; width: 180px; height: 25px; } #contact-form label#contact-message textarea { width: 437px; height: 85px; padding: 5px; background: #373942; color: #888; font: inherit; font: 12px/1 "SohoStdItalic"; } #contact-form #contact-form-submit { display: block; width: 50px; position: absolute; right: 12px; bottom: 26px; background: #6690a3; color: #fff; font: 12px/1 "SohoStdItalic"; padding: 5px; cursor: pointer; -webkit-appearance: none; } #contact-form #contact-form-ok{ background:url("../images/contact-ok.png") no-repeat scroll 0 0 transparent; color:#6690A3; font-size:24px; height:130px; left:30px; line-height:30px; padding:0 0 0 89px; position:absolute; top:85px; width:300px; } #footer{ position: relative; height: 120px; background: #212225; margin-bottom: 34px; } #footer p{ font: 16px/1.5 "SohoStdItalic"; color: #c3c4c6; display: block; position: absolute; left: 30px; top: 34px; } #hosted-by{ width: 72px; height: 47px; background: url("../images/hosted-by-footer.png"); position: absolute; right: 30px; top: 37px; } #twitter-footer{ width: 25px; height: 20px; position: absolute; background: transparent url("../images/social-twitter-header.png") no-repeat scroll center 100%; top: 48px; right: 217px; display: block; } #mail-footer{ width: 21px; height: 13px; position: absolute; background: transparent url("../images/social-mail-header.png") no-repeat scroll center 100%; top: 53px; right: 253px; display: block; } #divider-footer{ width: 1px; height: 56px; position: absolute; background: transparent url("../images/divider-footer.png"); top: 31px; right: 136px; display: block; } #loaderLogo{ background: transparent url("../images/loader-bg.png"); position: absolute; top: 50%; left: 50%; margin: -59px 0 0 -59px; width: 118px; height: 118px; opacity: 0; } #loader{ width: 100%; position: absolute; z-index: 99; height: 100%; background: #282a34; }