/* CUSTOM LAYOUT (Screen width above 992px)--------------------------------------------------------------------*/ /* GLOBAL LAYOUTS */ body { padding-top:5em; } section, header, footer { width:100%; margin:0 auto; } article { position:relative; padding:0em 1em; margin:0 auto; max-width: 60em; clear:both; overflow:hidden; } .column, aside { float:left; padding:1.5em 1em 1em 1em; text-align: left; } .one .column { max-width: 38em; min-width:38em; } .one aside { max-width: 18em; min-width:18em; } .two .column { max-width: 28em; min-width:28em; } .three .column { max-width:18em; min-width:18em; } .four .column { max-width:13em; min-width:13em; } .five .column { max-width:10em; min-width:10em; } #sub { background:; } #split { background:; } /* -- BASE LAYOUT -- */ header { position:fixed; top:0; margin-bottom:2em; background:#1b1c1f; z-index:2; } header .border-bottom { position:relative; width:100%; height:3px; bottom:-5px; border-top:2px solid #eaeaea; background-color:#1b1c1f; z-index:1; } footer { margin-top:2.5em; background:#1b1c1f; } header article, footer article { overflow:visible; } #logo { display:block; position:absolute; bottom:-38px; left:1em; z-index:2; } #creator { width:100%; text-align:right; } #creator p { max-width:none; margin:0em 0em 1em 10em; padding-top:0.5em; font-size:0.75em; color:#777777; } #banner { min-height:404px; background:url('../images/globe-gripz-banner.jpg') no-repeat center; overflow:hidden; } #banner article { overflow:visible; } #tagline { display:block; width:999em; margin:4em 0em 0em 30em; padding:1em; background:url('../images/tagline-bg.png') top left; } #tagline h1 { max-width:7.5em; margin:0; color:#eaeaea; } #tagline h1 span.bigger { display:inline-block; clear:both; font-size:150%; } #thanks { padding-top:5em; padding-bottom:8em; text-align:center; } #intro .border-top { position:relative; width:100%; height:3px; top:-5px; background-color:#1b1c1f; } #intro .border-bottom { position:relative; width:100%; height:3px; bottom:-5px; background-color:#1b1c1f; } #intro { background-color:#1b1c1f; } .intro { } #intro article { overflow:visible; } #intro .intro { position:relative; width:58em; max-width:58em; padding:0em; margin:0em 1em; } #intro p { float:left; max-width:none; margin:0.75em 0em; color:#eaeaea; font: 1.500em 'freightsans-medium', Arial, sans-serif; } #gp-logo { position:absolute; top:-26px; right:0px; z-index:1; } #features { margin-top:1em; } #features .column { max-width:18em; margin:1em; padding:0em; padding-bottom:58px; background:#ce6728 url('../images/feature-bottom.jpg') no-repeat bottom center; text-align:center; color:#eaeaea; } #features p { margin:0em 1em; } #features img { width:100%; } #video { margin-top:4em; padding-bottom:2em; background:#27282d url('../images/video-bg.png') no-repeat center; overflow:visible; } #video hgroup { position:relative; top:-1.5em; max-height:60px; overflow:hidden; } #video article { overflow:visible; } .video { position:relative; margin:0em auto; padding-bottom:30px; padding-top:30px; color:#eaeaea; overflow:hidden; } .video iframe { position:absolute; top:0; left:0; width:100%; height:100%; z-index:1; } #morefeatures { margin-top:2em; } #morefeatures h3 { color:#ce6728; font:1.5em 'freightsans-black', Arial, sans-serif; font-weight:normal; } #morefeatures img { width:100%; } #subfeatures .column { max-width:11em; min-width:11em; min-height:10.875em; margin:1em 0.5em; padding:0.625em 0em 0em 0em; padding-bottom:30px; background:#ce6728 url('../images/feature-bottom.jpg') no-repeat bottom center; text-align:center; color:#eaeaea; } #subfeatures h3 { font-size:1em; padding:0em 0.25em; } #subfeatures img { width:100%; } #buynow { margin-top:4.5em; padding-bottom:2em; color:#eaeaea; background:#27282d url('../images/video-bg.png') no-repeat center; overflow:visible; } #buynow article { overflow:visible; } #buynow hgroup { position:relative; top:-1.5em; max-height:60px; overflow:hidden; } #buynow .buy-img { float:left; max-width:30%; margin-right:1em; } #buynow p { max-width:none; } .buy-panel { text-align:right; } .price { margin-bottom:0.5em; font: 3.5em 'freightsans-medium', Arial, sans-serif; text-align: baseline; } .price sup { font-size:0.5em; } #newsletter { padding:0.5em 1em; padding-bottom:40px; background:#27282d url('../images/aside-bottom.jpg') no-repeat bottom center; color:#eaeaea; } #app { margin-top:0.5em; padding:0.5em 1em; background:#27282d url('../images/aside-bottom.jpg') no-repeat bottom center; color:#eaeaea; text-align:center; } .app-icon { display:inline-block; clear:both; width:auto; margin:0 auto; } #faqs { position:relative; margin-top:2em; background-color:#1b1d1f; color:#eaeaea; } #faqs .border-top { position:relative; width:100%; height:3px; top:-5px; background-color:#1b1c1f; } #faqs .border-bottom { position:relative; width:100%; height:3px; bottom:-5px; background-color:#1b1c1f; } #faqs dl { max-width:none; } #faqs dt:hover { cursor:pointer; text-decoration: underline; } #faqs h3 { color:#ce6728; font-family:'freightsans-black', Arial, sans-serif; font-weight:normal; } #reviews { font-size:16px; } .copyright { padding:2em 1em; color:#bbbbbb; text-align:right; } .copyright p { float:right; } #disclaimer div { padding:0.5em 1em; } #disclaimer p { max-width:none; color:#bbbbbb; } #social-share article { padding-top:1em; line-height:1em; } #social-share #google-share { display:inline-block; position:relative; top:4px; } #social-links { display:block; float:left; margin:0; margin-top:35px; padding:0em 1em; list-style:none; } #social-links a { display:block; width:40px; height:40px; margin:0em 1em 1em 1em; text-indent:99em; overflow:hidden; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } #social-links .rss-link { background:url(../images/buttons/rss.jpg) no-repeat center; } #social-links .facebook-link { background:url(../images/buttons/facebook.jpg) no-repeat center; } #social-links .twitter-link { background:url(../images/buttons/twitter.jpg) no-repeat center; } #social-links .youbtube-link { background:url(../images/buttons/youtube.jpg) no-repeat center; } #social-links .rss-link:hover { background-image:url(../images/buttons/rss-hover.jpg); } #social-links .facebook-link:hover { background-image:url(../images/buttons/facebook-hover.jpg); } #social-links .twitter-link:hover { background-image:url(../images/buttons/twitter-hover.jpg); } #social-links .youbtube-link:hover { background-image:url(../images/buttons/youtube-hover.jpg); } #footer-about p { max-width:none; } /* -- NAVIGATION -- */ nav { float:left; margin-left:10em; padding:0.375em 0em 0.375em 0em; } nav ul { max-width:40em; } nav li { display:block; position:relative; float:left; } nav ul li a { display:block; padding:0em 1em; outline:none; color:#eaeaea; text-decoration:none; } nav ul li a:visited { outline:none; color:#eaeaea; text-decoration:none; } nav ul li a:hover { outline:none; color:#ce6728; text-decoration:none; -webkit-transition: color 0.25s ease; -moz-transition: color 0.25s ease; -ms-transition: color 0.25s ease; -o-transition: color 0.25s ease; transition: color 0.25s ease; } nav ul li a:active, nav ul li a:focus { outline:none; } .selectnav { display: none; } /* -- TYPOGRAPHIC LAYOUT -- */ hgroup .capped { position:relative; display:inline-block; width:auto; max-height:60px; margin:0; padding:0.25em 0.75em; color:#eaeaea; background-color:#ce6728; } hgroup .cap-left { display:inline-block; position:absolute; top:0; left:-27px; width:27px; height:60px; background:url('../images/title-cap-left.png') no-repeat center; } hgroup .cap-right { display:inline-block; position:absolute; top:0; right:-27px; width:27px; height:60px; background:url('../images/title-cap-right.png') no-repeat center; } /* -- TOGGLE SWITCH --*/ /* -- BUTTONS -- */ #btn-buynow { display:block; float:right; margin-bottom:0.250em; padding:0.450em 1em; background-color:#ce6728; color:#eaeaea; font:1em 'freightsans-black', Arial, sans-serif; } #btn-buynow:hover { text-decoration:none; background-color:#d87437; } a.buynow { display:inline-block; margin-bottom:0.250em; padding:0.450em 1em; background-color:#ce6728; color:#eaeaea; font:1.5em 'freightsans-black', Arial, sans-serif; clear:both; } a.buynow:hover { text-decoration:none; background-color:#d87437; color:#eaeaea; } #btnSubscribe { display:inline-block; margin:0em; padding:0.450em 1em 0.3em 1em; border:none; font: 0.875em 'OpenSans-Regular', Arial, sans-serif; text-transform:uppercase; color:#eaeaea; line-height:1em; background:#ce6728; } #btnSubscribe:hover { text-decoration:none; background-color:#d87437; color:#eaeaea; cursor:pointer; } .anchor { display: block; content: " "; margin-top: -4em; height: 4em; visibility: hidden; } a.button, a.button:visited { display:inline-block; font-size:0.750em; text-transform:uppercase; color:#eaeae8 !important; margin:0.75em 0em 0em 0em; line-height:1em; padding:0.450em 1em 0.3em 1em; background:#4065AF; } a.button:hover { color:#eaeae8; background:#333333; } footer .goingup { display:block; position:absolute; right:2em; top:-1em; width:30px; height:30px; text-indent:999em; background:#4065AF; background:url(/media/images/buttons/up-button.jpg) no-repeat top left; } footer .goingup:hover { background-position:0px -30px; } /* -- FORMs -- */ #txtSubscribe { max-width:11em; margin:0; padding:0.40em 0.5em 0.125em 0.5em; border:none; font: 0.875em 'OpenSans-Regular', Arial, sans-serif; line-height:1em; } #contact input, #contact textarea { padding: 5px; width:17.5em; max-width:17.5em; font: 0.875em 'OpenSans-Regular', Arial, sans-serif; margin: 0px 0px 10px 0px; border:1px solid #27282d; color:#eaeaea; background-color:#27282d; } #contact textarea { height: 90px; } #contact textarea:focus, #contact input:focus { border: 1px solid #ce6728; } #contact input#submit-button { width: 100px; float: right; background-color:#ce6728; color:#eaeaea; } #contact input#submit-button:hover { text-decoration:none; background-color:#d87437; cursor:pointer; } #contact label { float: left; text-align: right; padding-right: 10px; width: 90px; padding-top: 8px; font: 0.875em 'OpenSans-Regular', Arial, sans-serif; line-height: 1em; } /* -- SCROLLER -- */ .scrollable { position:relative; overflow:visible; width:560px; height:366px; margin:0 auto; } .vid-foreground-left { position:absolute; top:0; left:-90px; width:168px; height:518px; background:url('../images/video-fg-left.png') no-repeat center right; z-index:1; } .vid-foreground-right { position:absolute; top:0; right:-90px; width:168px; height:518px; background:url('../images/video-fg-right.png') no-repeat center left; z-index:1; } .scrollable .items { width:20000em; position:absolute; clear:both; } .items div { float:left; width:560px; margin-right:4em; text-align:center; } .items p { max-width:none; } .scrollable img { float:left; } .scrollable .active { position:relative; cursor:default; } a.browse { display:block; position:absolute; top:40%; width:19px; height:60px; margin:0; cursor:pointer; z-index:1; } a.right { right:160px; background:url('../images/video-next.png') no-repeat center; } a.left { left:160px; background:url('../images/video-prev.png') no-repeat center; } a.disabled { visibility:hidden !important; } .nyroModalBg { position:fixed; overflow:hidden; top:0; left:0; height:100%; width:100%; background:#000; opacity:0.7; z-index:2; } .nmReposition { position: absolute; z-index:2; } .nyroModalCloseButton { top:-13px; right:-13px; width:18px; height:23px; text-indent:-9999em; background:url(../images/close.png); z-index:4; } .nyroModalCont { position: absolute; border: 4px solid #1b1c1f; border-bottom:none; margin: 25px; background: #1b1c1f; z-index:3; } .nyroModalCont iframe { width: 600px; height: 400px; z-index:3; } .nyroModalError { border: 4px solid red; color: red; width: 250px; height: 250px; z-index:3; } .nyroModalError div { min-width: 0; min-height: 0; padding: 10px; } .nyroModalLink, .nyroModalDom, .nyroModalForm, .nyroModalFormFile { position:relative; padding:0px; min-height:250px; min-width:250px; max-width:1000px; z-index:3; } .nyroModalImage, .nyroModalSwf, .nyroModalIframe, .nyroModalIframeForm { position: relative; overflow: hidden; z-index:3; } .nyroModalHidden { left: -9999em; top: -9999em; } .nyroModalLoad { position:absolute; width:100px; height:100px; background:#1b1c1f url(../images/loader.gif) no-repeat center; padding:0; } @media screen and (width: 1024px) { header { position:absolute; top:0; } } /* CUSTOM LAYOUT & TYPOGRAPHY (Screen width 512px to 992px)----------------------------------------------------*/ @media screen and (min-width: 32em) and (max-width: 62em) { /* This CSS needs to be duplicated into css/ie_fix/ie_tablet.css */ /* GLOBAL LAYOUTS */ article { max-width: 30em; } .column, aside { float: none; max-width: 30em; margin: 0 auto; padding:1em 0em 0em 0em; } .one .column, .one aside, .two .column, .three .column { max-width: 30em; min-width:0em; } .four .column { float:left; max-width:14em; } .four .column:nth-of-type(odd) { padding:1em 1em 1em 0em; } .four .column:nth-of-type(even) { padding:1em 0em 1em 1em; } .five .column { float:left; } .slateclear { clear:both; } /* -- BASE LAYOUT - */ header .border-bottom { border-top:2px solid #eaeaea; } #banner { min-height:256px; background-image:url('../images/globe-gripz-banner-tablet.jpg'); } #tagline { margin:2.5em 0em 0em 15em; } #tagline h1 { max-width:7.5em; font-size:2.142em; } #intro .intro { position:relative; width:30em; max-width:30em; padding:0em; } #intro p { float:left; max-width:20em; font-size:1.125em; } #features .column { float:left; width:149px; margin:0.5em; padding-bottom:38px; } #features .column:first-of-type { margin-left:0; } #features .column:last-of-type { margin-right:0; } #features p { margin:0em 0.5em; font-size:0.750em; } #features img { } #video hgroup { position:relative; top:-1.75em; } hgroup h2.capped { font-size:1.25em; padding:0.25em; } hgroup .cap-left, hgroup .cap-right { height:41px; } #morefeatures { } #morefeatures h3 { font: 1.375em 'freightsans-medium', Arial, sans-serif; } #morefeatures p { max-width:none; } #morefeatures img { width:50%; float:left; margin:0.5em 0.4375em 0em 0em; } #subfeatures .column { max-width:9.5em; min-width:9.5em; margin:1em 0.25em; margin-bottom:0; } #subfeatures .slate-center { width:20em; margin:0 auto; overflow:hidden; } #buynow hgroup { position:relative; top:-1.75em; } #buynow { background-color:#1b1d1f; } #newsletter, #app { background-image:url('../images/aside-bottom-tablet.jpg');} #disclaimer div { padding:0.5em 0em; } .anchor { margin-top: -6em; height: 6em; } /* -- NAVIGATION -- */ nav { } .js #nav { display: none; } .js .selectnav { display: block; } /* -- FORMS -- */ #txtSubscribe { width:20em; max-width:none; } .scrollable {width:480px; overflow:hidden;} .items div { width:480px; } .scrollable img { max-width:100%; } a.right { right:-24px; } a.left { left:-24px; } .video { overflow:visible; } .vid-foreground-left { display:none; } .vid-foreground-right { display:none; } } /* CUSTOM LAYOUT & TYPOGRAPHY (Screen widths under 512px)--------------------------------------------------------*/ @media screen and (min-width: 0em) and (max-width: 31.999em) { /* This CSS needs to be duplicated into css/ie_fix/ie_mobile.css */ /* GLOBAL LAYOUTS */ article { width:auto; max-width: 30em; min-width:24em; } .column, aside { float: none; width:auto; max-width:30em; margin: 0 auto; padding:1em 0em 0em 0em; } .one .column, .one aside, .two .column, .three .column, .four .column, .five .column { width:auto; max-width: 30em; min-width:0em; } .five .column { float:left; } section { width:auto; min-width:26em; } blockquote { float:none; max-width:30em; margin:0em 0.75em 1em 0.75em; } .smartclear { clear:both; } .smarthide { display:none; } .smart-center { margin:0 auto; } /* -- BASE LAYOUTS -- */ header, footer { min-width:26em; } header .border-bottom { border-top:2px solid #eaeaea; } #banner { min-height:256px; background-image:url('../images/globe-gripz-banner-phone.jpg'); } #tagline { width:auto; margin:1em 0em 0em 0em; background-image:none; } #tagline h1 { max-width:none; font-size:1.75em; text-align:center; color:#1b1c1f; } #tagline h1 span.bigger { display:inline; clear:none; font-size:120%; } #intro .intro { width:21.5em; max-width:23.5em; margin:0 auto; } #gp-logo { top:-12px; right:12px; } #intro p { float:left; display:block; max-width:12em; font-size:1.125em; } #features .column { max-width:none; padding-bottom:38px; background-image:url('../images/feature-bottom-tablet.jpg'); overflow:hidden; } #features img { } #features .trim { margin-top:-38px; overflow:hidden; line-height:normal; } hgroup h2.capped { font-size:1.25em; max-width:15em; min-height:46px; padding-top:7px; padding-bottom:7px; } #morefeatures h3 { font: 1.375em 'freightsans-medium', Arial, sans-serif; } #morefeatures p { max-width:none; } #morefeatures img { width:50%; float:left; margin:0.5em 0.4375em 0em 0em; } #subfeatures article { max-width:24em; } #subfeatures .column { margin-bottom:0; width:45%; } #subfeatures .smart-center { clear:both; width:12em; margin:0 auto; overflow:hidden; } #buynow { background-color:#1b1d1f; } #newsletter, #app { background-image:url('../images/aside-bottom-tablet.jpg');} #buynow .buy-img { float:left; max-width:30%; min-width:9em; margin-right:1em; } #contact input, #contact textarea { width:19em; max-width:19em; } #contact input#submit-button { float:left; margin-left:100px; } .anchor { margin-top: -7em; height: 7em; } /* -- NAVIGATION -- */ nav { margin-left:8em; } .js #nav { display: none; } .js .selectnav { display: block; } .scrollable {width:100%; height:auto; overflow:hidden;} .scrollable .items { position:relative; width:100%; } .scrollable .cloned { display:none; } .items div { float:left; width:100%; } .scrollable img { max-width:100%; } a.right { display:none; } a.left { display:none; } .video { overflow:visible; } .vid-foreground-left { display:none; } .vid-foreground-right { display:none; } }