/* Less Framework 4 http://lessframework.com by Joni Korpi License: http://opensource.org/licenses/mit-license.php */ /* Resets ------ */ html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,hr,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figure,figcaption,hgroup,menu,footer,header,nav,section,summary,time,mark,audio,video{border:0;margin:0;padding:0;} article,aside,canvas,figure,figure img,figcaption,hgroup,footer,header,nav,section,audio,video{display:block;} a img{border:0;} /* Typography presets ------------------ */ .gigantic{font-size:110px;line-height:120px;letter-spacing:-2px;} .huge,h1{font-size:2.929em; line-height:1.22;letter-spacing:-1px;padding-bottom: 9px;} .large,h2{font-size:24px;line-height:1.66; color:#F90;padding-bottom: 18px;} .bigger,h3{font-size:16px;line-height:1.22;padding-bottom: 18px;} .big,h4{font-size:22px;line-height:30px;} body{font:0.875em/1.68 Arial, Helvetica, sans-serif;} .small,small{font-size:13px;line-height:18px;} p{padding-bottom:10px;} /* hr */ div.hr{height:1px;background:#C6C4B3;clear:both;margin:33px 0;} div.hr2{height:1px;background:#C6C4B3;clear:both;margin:33px 0;} div.hr hr{display:none;} .clear{clear:both;} /* Lists */ ul{list-style:none;margin:0;padding:0;} li{padding-left:.6em;text-indent:-.7em;} li:before{content:"■ ";color:#F90;} /* Links */ a:link {text-decoration:none; color:#104480;} /* unvisited link */ a:visited {text-decoration:none;color:#963;} /* visited link */ a:hover {text-decoration: underline;color:#E47911;} /* mouse over link */ a:active {text-decoration: underline; color:#E47911;} /* selected link */ /* Selection colours (easy to forget) */ ::selection {background: rgb(255,255,158);} ::-moz-selection {background: rgb(255,255,158);} img::selection {background: transparent;} img::-moz-selection {background: transparent;} body {-webkit-tap-highlight-color: rgb(255,255,158);} /* Column Presets */ .one{width:68px;} .two{width:160px;} .three{width:252px;} .four{width:344px;} .five{width:436px;} .six{width:528px;} .seven{width:620px;} .eight{width:712px;} .nine{width:804px;} .ten{width:896px;} /* Default Layout: 992px. Gutters: 24px. Outer margins: 48px. Leftover space for scrollbars @1024px: 32px. ------------------------------------------------------------------------------- cols 1 2 3 4 5 6 7 8 9 10 px 68 160 252 344 436 528 620 712 804 896 */ /* Main Containers */ body{width:90%;background:#fff;color:#3c3c3c;-webkit-text-size-adjust:100%;padding:48px 48px 84px;} #head{width:100%;height:100px;float:left;} #content{width:73%;float:left;} #content li{padding-bottom:15px;} #content li strong{font-size:18px;} #content .left{width:49%;float:left;border-right:#C6C4B3 solid 1px;} #content .right{width:49%;float:right;} /* Left Nav */ #nav{width:190px;float:left;display:block;margin-right:24px;margin-bottom:24px;} #nav li{border-bottom:#C6C4B3 solid 1px;padding:10px;} #nav #last{border-bottom:#fff solid 0;} /* Customer Successes */ .success{width:18%;height:160px;float:left;margin-right:12px;} .success p{text-align:center;} .first{margin-left:0;} .img{height:70px;} #naughtydog{background:url(images/naugty.gif) center center no-repeat;} #tinyco{background:url(images/tinyco.gif) center center no-repeat;} #playfish{background:url(images/playfish.gif) center center no-repeat;} #gumi{background:url(images/gumi.gif) center center no-repeat;} #cmune{background:url(images/cmune.gif) center center no-repeat;} /* Helping you do stuff */ .horizontal {} .horizontal h3{display:block;width:33%;float:left;padding-right:3%;} .horizontal p{display:block;float:left;width:63%;} /* Benefits */ .benefits{width:29%;height:190px;float:left;margin-right:24px;} .benefits p{text-align:left;} .withimage{font-weight:bold;display:block; height:48px;padding-top:8px;padding-left:50px; line-height:1.3;} #move{background:url(images/watch.gif) left top no-repeat;} #reach{background:url(images/reach.gif) left top no-repeat;} #sell{background:url(images/sell.gif) left top no-repeat;} #scale{background:url(images/scale.gif) left top no-repeat;} #no{background:url(images/no.gif) left top no-repeat;} #secure{background:url(images/secure.gif) left top no-repeat;} /* Gets tarted */ .titlelink{font-weight:bold;padding-bottom:30px} .getstarted{width:22%;height:190px;float:left;margin-right:24px;} .getstarted p{text-align:left;} /* Gets tarted */ .footer{float:left;width:100%;margin-top:100px;} .footer p{width:100%; text-align:center; font-size:11px;} /* Tablet Layout: 768px. Gutters: 24px. Outer margins: 28px. Inherits styles from: Default Layout. ----------------------------------------------------------------- cols 1 2 3 4 5 6 7 8 px 68 160 252 344 436 528 620 712 @media only screen and (min-width: 768px) and (max-width: 991px) { body { width: 712px; padding: 48px 28px 60px; } h2{color:#6C6;} } */ /* Mobile Layout: 320px. Gutters: 24px. Outer margins: 34px. Inherits styles from: Default Layout. --------------------------------------------- cols 1 2 3 px 68 160 252 @media only screen and (max-width: 767px) { body { width: 252px; padding: 48px 34px 60px; } } */ /* Wide Mobile Layout: 480px. Gutters: 24px. Outer margins: 22px. Inherits styles from: Default Layout, Mobile Layout. ------------------------------------------------------------ cols 1 2 3 4 5 px 68 160 252 344 436 @media only screen and (min-width: 480px) and (max-width: 767px) { body { width: 436px; padding: 36px 22px 48px; } } */ /* Retina media query. Overrides styles for devices with a device-pixel-ratio of 2+, such as iPhone 4. ----------------------------------------------- @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { body { } } */