/* HTML5 Reset and font-face */
@charset "utf-8";html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:top}:focus{outline:0}
article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; }
@blue: #32b4db;
@orange: #f9a728;
.boxShadow (@arguments: 0 0 4px #444){
box-shadow:@arguments;
-moz-box-shadow:@arguments;
-webkit-box-shadow:@arguments;
}
.borderRadius (@size: 4px){
border-radius:@size @size @size @size;
-moz-border-radius:@size @size @size @size;
-webkit-border-radius:@size @size @size @size;
}
.opacity (@num: 0.5, @ieNum: 50){
opacity: @num; /* standard: ff gt 1.5, opera, safari */
-ms-filter: "alpha(opacity=@ieNum)"; /* ie 8 */
filter: alpha(opacity=@ieNum); /* ie lt 7 */
-khtml-opacity: @num; /* safari 1.x */
-moz-opacity: @num; /* ff lt 1.5, netscape */
}
.gradient (@top, @bottom, @start: 0%, @stop: 100%){
background: @top; /* Old browsers */
background: -moz-linear-gradient(top, @top @start, @bottom @stop); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(@start,@top), color-stop(@stop,@bottom)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, @top @start,@bottom @stop); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, @top @start,@bottom @stop); /* Opera 11.10+ */
background: -ms-linear-gradient(top, @top @start,@bottom @stop); /* IE10+ */
background: linear-gradient(to bottom, @top @start,@bottom @stop); /* W3C */
}
.coverBG () {-webkit-background-size: cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover}
html, body {height:100%}
body {background:#fff; font-family: 'Open Sans', sans-serif}
strong {font-weight:bold}
a {color:#1290b8; transition:all .25s ease;
&:hover {color:#32b4db}
}
ul.list {margin-left:30px; padding-bottom:15px;
.indent {display:block; margin-left:20px; font-size:14px; padding-bottom:10px}
}
li {list-style-position:inside}
em {font-style:italic}
pre {font-family:monospace; background:#eee; padding:10px; margin:5px 0; font-size:11px; .borderRadius(); box-sizing:border-box}
/* BUTTONS */
.button {display:inline-block; padding:0 10px; border:#fff 1px solid; text-align:center; height:36px; line-height:36px; background:#fff; color:#2d2e32!important; text-decoration:none; text-transform:uppercase; .borderRadius(4px); transition:all .25s ease;
&:hover {background:transparent; color:#fff!important; text-decoration:none!important; cursor:pointer}
&.orange {background:#de9931; color:#fff!important;
&:hover {background:lighten(#de9931,10%)}
}
}
/* HELPFUL CLASSES */
.wrapper {width:1100px; margin:0 auto;
&.postsWrap {padding-top:320px}
}
.left {float:left}
.right {float:right}
.half {width:50%; box-sizing:border-box}
.clear {display:block; clear:both}
.faded {color:#aaa}
.small {font-size:11px}
.forth {width:25%; box-sizing:border-box; float:left}
.third {width:32%; box-sizing:border-box; float:left;
&.middle {margin:0 2%}
}
.hidden {display:none}
/* Font Colors */
.money {color:#15B13F}
/* COMMON ELEMENTS */
.form {
.left.half {padding-right:5px}
.right.half {padding-left:5px}
label {display:block; font-weight:bold; padding:6px 0 2px}
input:not([type="submit"]), select, textarea {.borderRadius(); border:#333 1px solid; background:#fff; width:100%; height:40px; line-height:40px; text-indent:10px; box-sizing:border-box}
}
.formSuccess {width:100%; display:block; margin:10px auto; box-sizing:border-box; background:green; color:#fff; padding:10px; text-align:center}
table.styled {width:100%; border:#ccc 1px solid; border-collapse:collapse;
thead tr {font-weight:bold}
td {padding:4px}
tbody tr {border-top:#ccc 1px solid; font-size:14px}
&.bordered {
thead tr {background:#000; color:#fff}
tbody tr:nth-child(odd) {background:#eee}
td {border:#ccc 1px solid}
}
}
.siteHeader {width:100%; height:75px; display:block; background:rgba(33,34,36,.95); position:fixed; top:0; left:0; z-index:50}
.logo {float:left; padding:18px 0;}
.mainNav {float:right; font-weight:300; font-size:14px;
li.mainLink {height:75px; line-height:75px; display:inline-block; position:relative; color:#fff; padding:0 12px;
&.hidden {display:none}
a {color:#fff; text-decoration:none; text-transform:uppercase}
.subMenu {display:block; width:600px; height:0px; position:absolute; top:75px; background:#2d2e32; text-transform:uppercase; font-size:13px; font-weight:100; overflow:hidden;
transition-duration:.5s; transition-timing-function: cubic-bezier(0.64, 0.57, 0.67, 1.25); border-radius:0 0 10px 10px;
&.dedicatedSub {left:-70px}
&.cloudSub {left:-70px;
h3 {margin-top:6px}
h3:first-child {margin:0}
}
&.aboutSub {left:-320px}
.half {padding:15px 15px 0}
h3 {font-size:18px; margin:0; line-height:normal; font-size:18px; color:#e05b00}
ul, li {height:auto; line-height:normal}
li {margin-left:10px; padding:4px 0; list-style-position:inside;
&.requestQuote {padding:12px 0 0 }
}
a:hover {text-decoration:underline}
.left {
li {list-style-type:none}
h3.last {margin-top:15px}
}
.right {padding-left:40px;
ul {padding-bottom:10px}
.button {position:relative; top:10px}
}
.social {margin-right:5px}
footer {width:100%; height:50px; line-height:46px; clear:both; display:block; text-align:center; background:rgba(255,255,255,.05)}
.closeMenu {display:none}
}
&:hover {background:#2d2e32;
.subMenu {display:block; height:300px; border-radius:0;
&.cloudSub {height:275px}
&.aboutSub {height:225px}
}
}
}
}
.banner {width:100%; height:500px; display:block; position:fixed; top:0; left:0; z-index:3; overflow:hidden;
ul {position:absolute; top:0; transition:all 1s ease; width:100%; display:block}
&.homeBanner {position:absolute; overflow:hidden;
ul {width:100%; overflow:visible;
li {position:absolute; top:0; left:0;
h1 {margin-top:200px}
.button {margin-top:20px;}
.button.ghost {background:transparent; color:#fff!important; border-color:#fff;
&:hover {background:#fff; color:#000!important; border-color:#000}
}
.button.black {background:#1e1f22; color:#fff!important; border-color:#1e1f22;
&:hover {background:transparent; color:#1e1f22!important; border-color:#1e1f22}
}
&.nyc {background-image:url(img/banner-nyc.jpg);}
&.resell-cloud {background-image:url(img/resell-the-cloud.jpg); left:100%;}
&.double-ram {background-image:url(img/banner-double.jpg); left:200%;
span {position:relative; top:10px; font-size:12px}
}
}
}
.slideNav {width:200px; height:20px; display:block; position:absolute; bottom:20px; left:50%; margin:0 -100px; text-align:center;
a {width:10px; height:10px; display:inline-block; margin:0 5px; border:#fff 1px solid; .borderRadius(10px); transition:all .25s ease;
&.selected {background:#fff}
}
}
}
li {width:100%; height:500px; display:block; background-position:bottom center; background-repeat:no-repeat; .coverBG(); color:#fff; box-sizing:border-box; text-align:center;
h1 {font-size:48px; text-align:center; text-transform:uppercase; transition:all .25s ease; display:inline-block; background:#000; padding:2px 8px; clear:both}
p {font-size:24px; font-weight:300; text-align:center; transition:all .25s ease; display:inline-block; background:#1e1f22; padding:2px 8px; margin-top:10px}
a {font-weight:300; color:#fff; text-decoration:none}
&.about-netdepot {background-image:url(img/banner-about-netdepot.jpg)}
&.our-team {background-image:url(img/banner-our-team.jpg)}
&.datacenter-and-network {background-image:url(img/banner-datacenter-and-network.jpg)}
&.careers {background-image:url(img/banner-careers.jpg)}
&.reseller-program {background-image:url(img/banner-reseller-program.jpg)}
&.join-the-reseller-program {background-image:url(img/banner-join-reseller-program.jpg)}
&.cloud-servers {background-image:url(img/banner-galaxy.jpg)}
&.features {background-image:url(img/banner-cloud-features.jpg)}
&.control-panel {background-image:url(img/banner-control-panel.jpg); color:#000}
&.hosting-blog {background-image:url(img/banner-hosting-blog.jpg)}
&.referral-program {background-image:url(img/banner-reseller-and-affiliate.jpg)}
&.program-banners {background-image:url(img/banner-program-banners.jpg)}
&.custom-quote {background-image:url(img/banner-custom-quote.jpg)}
&.epic-support {background-image:url(img/banner-epic-support.jpg)}
&.banner-cdn {background-image:url(img/banner-cdn.jpg)}
&.dedicated-server-features {background-image:url(img/banner-dedicated-server.jpg)}
&.dedicated-servers {background-image:url(img/banner-dedicated-server.jpg);
h1 {background:#fff; color:#000}
p {background:#deddda; color:#000}
}
&.managed-servers {background-image:url(img/banner-managed.jpg)}
&.private-cloud {background-image:url(img/banner-private-cloud.jpg)}
}
&.small {height:300px;
li {height:300px; padding-top:130px;
h1 {
&.blog-title {font-size:24px}
}
.meta {font-size:14px; .opacity(.7,70)}
}
}
&.smaller {
li {padding-top:95px;
h1 {font-size:24px;
&.blog-title {font-size:24px;}
}
p {font-size:14px}
.meta {font-size:14px; .opacity(.7,70)}
}
}
&.static {height:380px;
li {height:380px; padding-top:115px;
&.banner-cdn {padding-top:160px}
.wrapper {padding:0; margin-top:25px; position:relative}
.boxLink, .livechat_button {width:300px; height:100px; display:block; box-sizing:border-box; border:#fff 3px solid; color:#fff; text-transform:uppercase; text-decoration:none; background:rgba(0,0,0,.5); font-size:18px; padding:20px; transition:all .25s ease;
strong {display:block; font-size:32px; font-weight:bold; line-height:20px}
&.middle {position:absolute; top:0; left:50%; margin:0 -150px}
&:hover {background:rgba(0,0,0,.8)}
}
}
}
}
.content .wrapper.quickLook {padding:530px 0 0; height:250px; display:block;
.third {width:345px; height:220px; display:block; float:left; background:#000; color:#fff; box-sizing:border-box; padding:14px 20px; text-align:right; text-decoration:none;
&.dedicated {background:url(img/quick-dedicated-servers.jpg) top left no-repeat}
&.cloud {margin:0 30px; background:url(img/quick-cloud-servers.jpg) top left no-repeat}
&.managed {background:url(img/quick-private-cloud.jpg) top left no-repeat}
h3 {font-size:18px; text-transform:uppercase; font-weight:500}
ul {padding:10px 0 0; display:block; list-style-type:none; font-size:12px; font-weight:100; line-height:16px}
.price {display:inline-block; font-size:48px; font-weight:900; position:relative; float:right; margin-top:-4px;
.dollar {position:absolute; top:8px; left:-20px; font-size:30px; font-weight:100}
strong {line-height:65px}
.mo {position:absolute; bottom:-2px; right:0; font-size:12px; font-weight:100}
}
a, .href {color:#fff; font-size:12px; font-weight:100; text-decoration:none; display:block; clear:both; position:relative; top:8px; background:#f9a728; width:100px; float:right; text-align:center; padding:4px 0; .borderRadius(); text-transform:uppercase}
}
}
.cpShowcase {
h3 {font-size:32px; text-align:center; padding:30px}
.description {width:600px; display:block; font-size:18px; text-align:center; line-height:32px; margin:0 auto}
.showcase {height:300px; display:block; clear:both;
.third {transition:all .5s ease}
.third:nth-child(1) {font-size:28px; font-weight:500; width:340px; padding-top:130px; position:relative; left:-20px; .opacity(0,0)}
.third:nth-child(2) {position:relative; top:-20px; .opacity(0,0)}
.third:nth-child(3) {font-size:18px; font-weight:100; width:300px; padding-top:110px; float:right; position:relative; left:20px; .opacity(0,0)}
&.show {
.third:nth-child(1) {left:0; .opacity(1,100)}
.third:nth-child(2) {top:0; .opacity(1,100)}
.third:nth-child(3) {left:0; .opacity(1,100)}
}
}
}
.resell-the-cloud {width:100%; height:100%; display:block; position:fixed; top:0; left:0; z-index:1; background:url(img/resell-the-cloud.jpg) center center no-repeat; .coverBG();
h1 {width:800px; height:auto; position:absolute; top:50%; left:50%; margin:-150px -400px; text-align:center; font-size:60px; color:#000; font-weight:bold; text-transform:uppercase; .opacity(.8,8)}
h2 {width:575px; height:auto; position:absolute; top:50%; left:50%; margin:-170px -277px; text-align:left; font-size:20px; font-weight:100; color:#000; .opacity(.8,8)}
.getNotified {width:554px; height:auto; position:absolute; top:50%; left:50%; margin:-60px -277px;
input[type=text] {width:404px; height:40px; line-height:40px; background:rgba(255,255,255,.4); border:none; float:left; padding:0; text-indent:20px}
input[type=submit] {width:150px; height:40px; line-height:40px; background:rgba(255,255,255,.6); border:none; float:right; padding:0; cursor:pointer}
}
}
// Box styling
.box {width:100%; height:auto; box-sizing:border-box; display:block; background:#fff; border-top:#000 8px solid;
h4 {height:70px; line-height:70px; font-size:24px; text-indent:24px; color:#000; display:block}
ul li {padding:14px 0; text-indent:24px; border-top:#b5b5b5 1px solid; list-style-type:none; font-size:14px;
&:nth-child(odd) {background:#eaeaea}
}
.viewAll {height:40px; line-height:40px; display:block; background:#234271; color:#fff; text-indent:24px; font-weight:bold; font-size:14px; text-decoration:none; transition:all .25s ease;
span {float:right; position:relative; right:24px;}
&:hover {background:lighten(#234271,5%)}
}
}
.home .content {overflow:inherit}
.content {overflow:auto;}
.content .wrapper {padding-top:320px; clear:both;
&.noPad {padding:0}
.sideMenu {width:250px; height:auto; display:block; position:fixed; top:320px; left:50%; margin:0 -550px; transition:all .25s ease;
&.up {top:195px}
ul {list-style-type:none}
li {padding:0; margin:0;
a {font-size:14px; text-transform:uppercase; text-decoration:none; color:#999; padding:12px 0; display:block;
&:hover, &.selected {color:#000}
}
a.first {padding-top:0}
}
}
&.noBanner {padding-top:95px;
.sideMenu {top:95px}
}
.page {width:820px; float:right; padding-bottom:50px; clear:both;
&.full {width:100%; float:none}
h3 {font-size:32px; font-weight:800; text-transform:uppercase; padding:20px 0 10px}
h3:nth-child(1) {padding-top:0; line-height:24px}
p {padding-bottom:20px}
/* Specific Pages */
&.aboutND {
.left {width:505px}
.right {width:295px;
img {margin-bottom:6px}
}
}
&.ourTeam {
.profile {min-height:190px; display:block; position:relative; left:50px; opacity:0; overflow:auto; padding-bottom:10px;
&.one {transition:all .5s ease}
&.two {transition:all 1s ease}
&.three {transition:all 2s ease;}
img {float:left}
.info {width:640px; float:right; font-size:12px;
h5 {font-size:18px; font-weight:bold; padding-bottom:4px; line-height:12px}
strong {display:block; color:#555; font-weight:normal; padding-bottom:15px}
p {padding-bottom:10px}
.contact {color:#000}
}
}
&.show .profile {left:0; opacity:1}
.member {width:150px; height:170px; margin:0 0 10px 16px; float:left;
&.first {margin-left:0}
em {display:block; font-size:12px; padding-top:4px}
}
}
&.datacenter {
.location {width:268px; float:left; opacity:0; position:relative; top:100px;
&:nth-child(1) {transition:all .5s ease;}
&:nth-child(2) {transition:all 1s ease;}
&:nth-child(3) {transition:all 2s ease;}
&.two {padding:0 5px}
h4 {font-size:24px; color:#000; padding-bottom:24px; font-weight:bold}
p {padding:0 0 10px; font-weight:bold}
ul {list-style-type:none; margin-left:10px; padding-bottom:20px; font-size:12px}
.button {font-size:12px; margin:5px 0 0; position:relative; left:-10px}
}
&.show .location {top:0; opacity:1}
}
&.careers {
.whr-items {list-style-type:none}
.whr-item {position:relative; padding-right:20px;
h3 {display:block; font-size:18px}
.whr-info {list-style-type:none;}
.whr-location, .whr-date {font-size:10px}
.description {max-height:800px; overflow:hidden; font-size:12px; padding-bottom:20px; transition:all .5s ease;
&.short {max-height:80px; padding:0}
}
.more {position:absolute; bottom:0; left:0; width:100%; height:20px; line-height:20px; background:#fff; color:#aaa; font-size:10px; display:block}
}
}
&.join-the-reseller-program {padding-bottom:40px;
.form p {padding:10px 0}
}
&.features {
.half {padding-bottom:25px}
.half.left {padding-right:25px}
.half.right {padding-left:25px}
.img {width:100%; height:150px; overflow:hidden; position:relative; margin-bottom:10px;
.bw {position:absolute; top:0; left:0; z-index:2; .opacity(1,100); transition:all .5s ease}
.color {position:absolute; top:-150px; left:0; z-index:1}
}
.half:hover .bw, .half.highlight .bw {.opacity(0,0)}
}
.resellerTier {overflow:auto; padding-bottom:20px;
.plan {width:195px; height:auto; top:0; margin:0 5px; padding-bottom:20px;
&nth-child(4) {margin-right:0}
ul {padding:0}
li {border:none; font-size:14px;
strong {display:block; clear:both; padding-top:10px; font-weight:100; color:#999; font-size:14px;
.money {font-size:20px; font-weight:bold}
}
}
}
}
&:last-child {padding-bottom:20px;}
}
}
.highVolume {background:#272526; color:#fff; font-size:12px; width:240px; display:block; box-sizing:border-box; padding:10px 10px 15px; margin-top:20px;
.title {font-size:16px; padding-bottom:5px}
a {color:#fff}
}
.contact {font-size:14px; margin-bottom:40px;
h3 {font-size:18px; font-weight:100px; padding-bottom:10px;
img {margin-right:10px; position:relative; top:4px}
}
table {width:100%; margin-top:10px}
}
.epicMission {position:absolute; top:380px; left:0; width:100%; height:300px; box-sizing:border-box; background:#fff; padding:50px 0; color:#000; text-align:center; z-index:5;
.forth {padding-top:40px;
img {transition: all .25s ease}
strong {display:block; font-size:18px; padding-top:10px}
&:hover img {transform:rotate(20deg)}
}
}
.latestArticles {width:100%; height:500px; display:block; position:absolute; top:680px; left:0; background:#202c49; overflow:hidden;
.wrapper {position:relative; z-index:4;}
h3 {font-weight:bold; font-size:32px; text-align:center; color:#fff; padding:40px 0}
.left {padding-right:10px}
.right {padding-left:10px}
.earthBG {width:100%; height:500px; display:block; position:absolute; bottom:-300px; left:0; background:#202c49 url(img/epic-earth.jpg) top center no-repeat; background-position:fixed; .coverBG();}
}
.clientQuotes {padding-top:1180px; background:#fff; overflow:auto; padding-bottom:40px;
h3 {padding:40px 0; text-align:center; font-size:18px}
.third {width:32%; float:left; box-sizing:border-box; float:left; overflow:visible;
.quote {background:#eaeaea; padding:24px; display:block; color:#000; font-style:italic; .boxShadow(1px 1px 0 #bfbfbf); margin-bottom:40px; position:relative;
em, em a {font-size:12px; font-style:normal; color:#aaa; position:relative; top:5px}
&::after {content:""; width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent; border-bottom:8px solid #eaeaea; position:absolute; bottom:-4px; left:-4px; transform:rotate(90deg)}
&::before {content:""; width:0; height:0; border-left:7px solid transparent; border-right:7px solid transparent; border-bottom:7px solid #bfbfbf; position:absolute; bottom:-5px; left:-3px; transform:rotate(90deg)}
}
}
}
.cdnDeploy {position:absolute; top:380px; left:0; width:100%; height:200px; box-sizing:border-box; background:#fff; padding:35px 0 0; color:#000; z-index:5;
h3 {font-size:32px}
p {font-size:18px; padding-top:10px}
.left {width:850px; display:block}
.right {width:180px; display:block; padding-top:20px;
.button {padding:10px; width:150px}
}
}
.cdnServices {width:100%; height:500px; display:block; position:absolute; top:580px; left:0; background:url(img/banner-cdn-stars.jpg) bottom center no-repeat; background-position:fixed; .coverBG(); overflow:hidden; margin-bottom:600px; z-index:3;
.wrapper {position:relative; z-index:4;}
h3 {font-size:32px; text-align:center; color:#fff; padding:30px 0 0}
.left, .right {color:#fff; display:block;
h4 {font-size:24px; padding-top:10px}
p {font-size:12px; padding:5px 0}
a {color:#fff; text-decoration:underline}
}
.http {width:325px}
.video {width:370px; text-align:right}
.shuttle {width:200px; height:396px; display:block; position:absolute; bottom:-200px; left:50%; margin:0 -100px; background:url(img/shuttle.png) center center no-repeat}
}
.content .wrapper.noPad.locations {padding:1100px 0 100px; text-align:center;
h3 {font-weight:bold; font-size:32px; height:70px; line-height:60px}
.local {display:inline-block; padding:2px 4px; margin:4px 2px; background:#eee; font-size:15px}
}
// Plan styling
.cloudPlans {position:absolute; width:100%; height:500px; top:250px; display:block; overflow:hidden; z-index:3;
.wrapper {overflow:hidden; position:relative; height:1300px}
.planHolder {width:(190 + 26) * 9px + 100px; height:500px; display:block; position:absolute; top:0; left:-(190 + 26) * 1 - 2px}
}
.plan {width:190px; height:360px; position:relative; top:20px; background:#fdfdfd; display:block; margin:0 13px; box-sizing:border-box; border:#e8e8e8 1px solid; .borderRadius(); text-align:center; float:left;
h4 {font-weight:100; display:block; height:55px; line-height:52px;
strong {font-weight:600}
}
.circle {width:115px; height:115px; display:block; margin:0 auto; background:#555; color:#fff; .borderRadius(115px);
.cost {font-size:36px; font-weight:600; display:block; padding-top:20px;
.cents {font-size:24px}
}
.sub {font-size:14px; font-weight:400; text-transform:uppercase; display:block; position:relative; top:-10px}
.mo {font-size:10px; .opacity(.8,8); position:relative; top:-10px}
}
ul {list-style-type:none; padding-top:20px;
li {line-height:24px; font-size:12px}
}
.button {width:170px; height:40px; line-height:36px; background:#ccc; color:#fff!important; margin-top:10px; box-sizing:border-box; transition:all .25s ease;
&:hover {background:#aaa}
}
&.middle {width:215px}
&.highlighted {width:215px; height:430px; background:#3b0f40 url(img/plan-galaxy.jpg) top right no-repeat; .coverBG(); color:#fff; position:absolute; top:5px; left:50%; margin:0 -107px; z-index:2; border:none; .boxShadow(0 0 10px #3b0f40); overflow:hidden;
h4 {font-size:24px; height:70px; line-height:65px; width:215px * 9; position:absolute; top:0; left:-215px * 3;
span {width:215px; float:left; display:block}
}
.circle {width:145px; height:145px; background:#fff; color:#3b0f40; .borderRadius(145px); position:relative; margin-top:70px; overflow:hidden;
.textHolder {width:145px * 9; display:block; position:absolute; left:-145px * 3;
.text {width:145px; height:145px; display:block; float:left}
}
.cost {font-size:48px;
.cents {font-size:30px}
}
.sub {font-size:16px}
.mo {font-size:12px}
}
.detailsHolder {width:215px * 9; height:145px; display:block; position:absolute; top:215px; left:-215px * 3;}
ul {padding-bottom:10px; width:215px; height:145px; display:block; float:left;
li {font-size:14px; line-height:28px}
}
.button {background:#fff; color:#3b0f40!important; .boxShadow(0 0 10px rgba(255,255,255,.7)); position:absolute; bottom:20px; left:24px}
}
}
.slider {width:1110px; height:35px; position:absolute; top:750px; left:50%; margin:0 -550px; z-index:5; display:block; background:url(img/sliderBG.png) center center no-repeat; overflow:visible;
.knob {width:38px; height:40px; display:block; background:url(img/knob.png) center center no-repeat; position:absolute; top:0; left:416px; cursor:pointer; z-index:2}
.planText {width:123px; height:80px; position:relative; top:-34px; float:left; text-align:center; color:#fff; .opacity(.4,40); z-index:1; transition:all 1s ease; cursor:pointer;
span {display:block; font-size:10px; position:relative; top:-6px}
&.selected, &:hover {.opacity(1,100); color:#baddff; text-shadow:0 0 3px #baddff}
}
}
.cloudFeatures {height:1300px; width:100%; display:block; background:#fff url(img/earth-repeat.jpg) bottom center repeat-x; color:#fff; position:relative;
.wrapper {padding-top:30px; position:relative; z-index:2}
h3 {font-size:32px; text-align:center; text-transform:uppercase; display:block; padding-top:820px}
.feature {width:300px; height:125px; padding:15px 15px 10px; background:rgba(0,0,0,.7); border:#fff 4px solid; box-sizing:border-box; margin:32px; float:left;
strong {font-size:18px; display:block; font-weight:400}
p {font-size:14px; font-weight:100}
}
.earth {width:100%; height:911px; display:block; position:absolute; bottom:0; left:0; z-index:1; background:url(img/earth.jpg) bottom center no-repeat}
}
.cta {height:95px; line-height:90px; font-size:24px; font-weight:300; text-transform:uppercase; text-align:center; clear:both;
&.black {background:#000; color:#fff;
a {color:@orange}
}
&.orange {background:#fc8927; color:#fff;
a {color:#fff; display:block}
}
a {color:@blue; text-decoration:none}
.button {position:relative; top:26px; left:10px; font-size:18px; border:none}
}
.controlPanel {width:100%; height:400px; display:block; background:url(img/control-panel.jpg) center center no-repeat; .coverBG();
.wrapper {padding:0}
h3 {padding:40px 0; font-size:32px; font-weight:300; color:#fff; text-align:center; text-transform:uppercase}
.video {width:360px; height:200px; background:#000; float:left; margin:0 115px 0 80px; overflow:hidden;
img {width:360px}
}
.blurb {float:left; color:#fff; font-size:14px; font-weight:100; width:500px; display:block; padding-top:20px;
p {padding-bottom:20px}
strong {font-size:24px; font-weight:300}
a {color:#fff}
}
}
.cloudAddt {
h3 {font-size:32px; font-weight:300; padding:30px 0; text-align:center; clear:both; text-transform:uppercase}
.infra {width:340px; height:150px; background:#000; color:#fff; padding:10px 20px; box-sizing:border-box; float:left;
&.middle {margin:0 40px}
strong {font-size:24px; display:block}
ul {list-style-position:inside;
li {padding:4px 0; font-size:14px}
}
}
.os {text-align:center; padding-bottom:40px;
.img {width:150px; height:150px; display:inline-block; margin:0 10px; position:relative;
img {width:150px; height:150px}
strong {display:block; width:100%; background:rgba(255,255,255,.95); padding:4px; color:#6291b0; font-weight:300; text-align:center; position:absolute; top:60px; z-index:2}
}
}
}
/* Dedicated Servers */
.dedicatedServers, .managedServers {padding:280px 0 40px;
h3 {font-size:32px; font-weight:bold; text-transform:uppercase; padding:20px 0 10px;}
.serverDetails {width:100%; height:66px; display:block; box-sizing:border-box; background:#eee; border:#000 1px solid; margin:0 0 20px; .boxShadow(0 0 2px rgba(0,0,0,.25));
strong {display:block; float:left; width:200px; height:65px; line-height:60px; font-size:16px; color:#fff; background:#000; font-weight:bold; text-indent:10px}
.detail {display:inline-block; width:100px; height:65px; line-height:55px; font-weight:600; font-size:16px; padding:0 10px; text-align:right; position:relative;
span {font-size:12px; font-weight:100; display:block; position:absolute; top:35px; right:10px; line-height:12px}
&:nth-child(3) {width:80px}
&:nth-child(4) {width:60px}
&:nth-child(6) {width:60px}
&:nth-child(8) {padding-right:20px;
span {right:20px}
}
}
.button {border:none; .borderRadius(0px); background:#fc8927; position:relative; top:12px; font-size:14px}
}
}
.managedServers .serverDetails .detail {
&:nth-child(3) {width:100px}
&:nth-child(4) {width:170px}
&:nth-child(5) {width:120px}
&:nth-child(6) {width:65px}
&:nth-child(7) {width:70px; padding-right:15px;
span {right:15px}
}
}
.allIncludes {padding:40px 0; overflow:auto; height:250px;
h3 {font-size:32px; font-weight:100; padding-bottom:30px; text-align:center}
}
.dedicatedDetails {
h3 {font-size:32px; font-weight:bold; text-align:center; text-transform:uppercase; padding:20px 0;}
.forth {padding:20px 0;
ul {list-style-position:inside;
li {padding:4px 0; font-size:12px}
}
}
}
.dedicatedFeatures {width:730px;
h3 {font-size:32px; font-weight:bold; text-align:center; text-transform:uppercase; padding:20px 0}
.left, .right {width:100%; height:250px; display:block; float:none;
.circle {width:180px; height:180px; display:block; background:#000; text-align:center; .borderRadius(180px);
img {padding-top:30px}
}
.blurb {width:500px; padding-top:35px}
}
.left {
.circle {float:left}
.blurb {float:right}
}
.right {
.circle {float:right}
.blurb {float:left}
}
}
/* Styling the blog */
.postsWrap {clear:both; overflow:auto}
.updated {display:none}
.post {width:820px; float:right; box-sizing:border-box; background:#fff; .boxShadow(0 2px 3px rgba(0,0,0,.2)); padding:20px 20px 0; margin:0 0 20px;
&.noShadow {.boxShadow(0 0 0 0)}
&:nth-child(1) {padding-top:0}
.blog-title {font-size:24px; font-weight:800; text-transform:uppercase; padding:20px 0 0; line-height:28px;
a {color:#000; text-decoration:none}
a:hover {color:@blue}
}
.blog-title:nth-child(1) {padding-top:0; line-height:24px}
.entry-meta {font-size:12px; padding-bottom:20px}
h2 {font-size:18px; font-weight:bold}
h3 {font-size:16px; font-weight:100; text-decoration:underline; margin:10px 0 5px}
p {padding:10px 0}
ul, ol {margin-left:25px}
}
.comment-respond {display:block; background:#eee; padding:10px;
h3 {margin:0}
label {display:block; font-weight:bold; padding:6px 0 2px}
input:not([type="submit"]), select, textarea {.borderRadius(); border:#333 1px solid; background:#fff; width:100%; height:40px; line-height:40px; text-indent:10px; box-sizing:border-box}
textarea {height:150px}
input[type="submit"] {display:inline-block; padding:0 10px; border:none; text-align:center; height:36px; line-height:36px; background:#de9931; color:#fff!important; text-decoration:none; text-transform:uppercase; .borderRadius(4px); transition:all .25s ease;
&:hover {background:lighten(#de9931,10%); cursor:pointer}
}
}
.single-post .post {padding-top:0}
.sidebar {width:250px; height:auto; display:block; position:fixed; top:320px; left:50%; margin:0 -550px;
.widget-title {font-size:18px}
ul {list-style-type:none}
li {padding:4px}
a {color:#333; font-size:12px;
&:hover {color:@blue}
}
}
.paging-navigation {clear:both; width:820px; float:right; height:100px;
h1 {display:none}
}
.pageWrap {min-height:100%; margin-bottom:-140px}
.pageWrap:after {content:""; display:block}
.pageWrap:after, footer {height:85px}
.mainFooter {margin:0; font-size:14px; box-sizing:border-box; padding-top:40px;
p {padding:3px 0; text-align:center;
a {color:#777}
}
}
// Going mobile
@media (min-width : 320px) and (max-width : 700px) {
.wrapper {width:98%; margin:0 auto}
.hideOnMobile {display:none!important}
.logo {display:block; float:none; text-align:center; position:relative; padding:6px 0 0}
.half, .third, .forth {width:98%; margin:0 auto; float:none}
.siteHeader {height:50px}
.menuToggle {width:32px; height:32px; display:block; position:absolute; right:30px; top:10px; background:url(img/down-arrow.png) center center no-repeat; transition:all .5s ease}
.mainNav {max-height:0; overflow:hidden; float:none; background:rgba(33, 34, 36, 0.95); transition:all 1s ease; position:relative; top:6px;
li.mainLink {display:block; text-align:center; height:60px; line-height:60px; position:relative;
&.hidden {display:block}
& > a {display:block}
&:hover .subMenu, &:hover.subMenu.cloud, &:hover .subMenu.aboutSub, &.number {display:none; height:360px!important}
.subMenu {position:absolute; top:0; left:0!important; width:100%; height:360px; display:none; z-index:5;
&.cloudSub {top:-60px}
&.aboutSub {top:-240px}
.left, .right {float:none; padding:0;
h3 {padding-top:5px}
ul li {margin:0}
}
.right {display:none}
.half {width:100%}
footer {font-size:12px}
.closeMenu {width:30px; height:30px; line-height:30px; margin:10px auto 0; display:block; font-size:14px; font-weight:100; border:#fff 1px solid; color:#fff; text-align:center; .borderRadius(30px); transition:all .25s ease;
&:active {background:#fff; color:#000}
}
}
&.showSub .subMenu {display:block!important}
&.dd a {position:relative;
.arrow {width:20px; height:20px; display:inline-block; position:absolute; top:19px; left:50%; margin:0 70px; transform:rotate(-90deg); background:url(img/down-arrow.png) center center no-repeat; background-size:14px 6px; text-decoration:none; transition:all .25s ease}
}
}
}
.menuDown {
.menuToggle {transform: rotate(180deg)}
.mainNav {max-height:600px; overflow:hidden}
}
.banner {height:320px;
ul li {height:320px;
h1 {font-size:24px}
p {font-size:18px}
}
&.homeBanner ul li h1 {margin-top:100px}
&.small, &.smaller, &.static {height:220px!important;
li {padding-top:95px; height:220px!important;
&.epic-support {height:380px!important}
}
}
}
.content {overflow:hidden;
.wrapper {padding-top:235px;
&.quickLook {padding-top:340px; height:auto;
.third {float:none; margin:0 auto 20px;
&.cloud {margin:0 auto 20px;}
}
}
.page {width:98%; float:none; margin:0 auto;
h3 {text-align:center;}
&.aboutND {
.left {width:100%; float:none;
h3 {text-align:center}
img {width:100%}
}
.right {display:none}
}
&.ourTeam {
.profile {
img {float:none; margin:0 auto; display:block}
.info {width:100%; float:none;
h5, strong {text-align:center}
h5 {padding-top:5px}
}
}
}
&.datacenter {
.location {text-align:center; width:100%;
&.two {padding:0}
.button {left:0}
}
}
&.careers {padding-bottom:70px}
.resellerTier .plan {margin:0 auto 10px; float:none}
&.program-banners {
pre {width:100%!important; overflow:auto}
img {max-width:100%; height:auto!important}
}
}
&.dedicatedFeatures, .cloudAddt .os {padding-bottom:40px}
.sideMenu {display:none}
}
}
.cta {height:auto; line-height:inherit; padding:15px 0; font-size:18px;
&.small {font-size:14px;}
.button {top:0; left:0; margin-top:5px}
}
.cpShowcase {
.description {width:auto}
.showcase {height:auto;
.third {float:none; width:98%!important; margin:0 auto 10px; text-align:center; padding:0!important;
img {width:100%}
&:nth-child(1) {margin-top:20px; position:relative; top:10px; z-index:1}
&:nth-child(3) {margin-bottom:20px}
}
}
}
.pageWrap {min-height:100%; margin-bottom:-160px}
.pageWrap:after {content:""; display:block}
.pageWrap:after, footer {height:140px}
.mainFooter {margin:0; font-size:14px; box-sizing:border-box; padding-top:30px; position:relative; top:-40px;
p {padding:3px 0; text-align:center;
strong {display:block}
a {color:#777}
}
}
.dedicatedServers, .managedServers {padding-top:240px;
h3 {font-size:24px; text-align:center}
.serverDetails {height:auto;
strong {width:auto; float:none; text-align:center}
.detail {display:block; width:50%!important; box-sizing:border-box; float:left; background:#fff; border:#eee 1px solid;
span br {display:none}
&:nth-child(odd) {text-align:left;
span {left:10px}
}
&:nth-child(8) {width:100%!important; clear:both; float:none; text-align:center; margin-bottom:10px;
span {position:relative; top:-18px; left:0}
}
}
.button {top:-5px; width:100%; margin:0 auto; padding:0; display:block; border:#eee 1px solid; border-width:0 5px; box-sizing:border-box}
}
}
.managedServers .serverDetails {
.detail:nth-child(6) {display:none}
.detail:nth-child(7) {width:100%!important; clear:both; float:none; text-align:center; margin-bottom:10px;
span {position:relative; top:-18px; left:0}
}
}
.allIncludes {height:auto}
.dedicatedDetails .forth {width:240px; margin:0 auto;}
.dedicatedFeatures {
.left, .right {width:98%; margin:0 auto; height:auto; position:relative;
.circle {float:none; position:absolute; top:20px; left:50%; margin:0 -90px}
.blurb {width:auto; float:none; padding-top:220px; font-size:14px; padding-bottom:30px}
}
}
.cloudPlans .planHolder {left:-580px}
.cloudFeatures {height:auto; padding-bottom:20px;
.slider {display:none}
.sliderDropdown {display:block; width:60%; height:40px; line-height:40px; position:absolute; top:720px; left:50%; margin:0 -30%; z-index:5}
h3 {color:#000}
.feature {float:none; margin:10px auto; border-width:1px}
}
.controlPanel {height:auto;
.wrapper {padding-top:0}
h3 {font-size:24px; width:90%; margin:0 auto}
.video {float:none; margin:0 auto}
.blurb {float:none; width:98%; margin:0 auto}
}
.cloudAddt {.infra, .infra.middle {float:none; margin:0 auto 10px; width:98%}}
.epicSupport {
.banner.small.static {height:400px!important;
ul li {padding-top:60px;
.boxLink {width:300px; height:60px; display:block; border-width:1px; font-size:14px; padding:6px; margin:4px auto;
&.left, &.right {float:none}
&.middle {position:relative; top:0; left:0; margin:0 auto}
strong {font-size:22px}
}
}
}
}
.epicMission {height:auto}
.cdnDeploy {top:200px; background:transparent; height:auto; z-index:1;
.left {width:98%; float:none}
.right {width:98%; float:none;
a {display:block}
}
}
.cdnServices {height:auto;
.left, .right {width:98%; margin:0 auto; float:none; padding-bottom:50px;}
.shuttle {display:none}
}
.content .wrapper.noPad.locations {padding-top:1345px;
h3 {height:auto}
}
.form {
.left.half, .right.half {padding:0; width:100%}
.button {width:100%; box-sizing:border-box}
}
.clientQuotes {
.third {
&.left, &.middle, &.right {float:none; width:98%; margin:0 auto 10px}
}
}
.wrapper.postsWrap {padding-top:235px}
.post {width:auto; float:none; padding-top:0;
img {max-width:98%; height:auto!important}
}
#comments {padding-bottom:40px}
}