body{ background: url(img/subtle_grunge.png); } header{ background: url(img/subtle_grunge.png) 0 0; position: relative; } nav{ background: url(img/mochaGrunge.jpg) 0 0; } nav a{ color: #eeeeee; } #logobox{ position: relative; z-index: 999999; } h1, a.size{ font-family: langdon; letter-spacing: -1px; font-size: 80px; padding-bottom: 30px; color: #111111; opacity: .7; } #home{ background: #f4f4f4; } #instructions{ width: 48%; float:left; padding: 0px 0px 40px 0px; } #instructions h1{ font-size: 80px; } #instructions p{ color: #222222; font-size: 16px; line-height: 18px; } #instructions .inner{ padding: 0px; padding-left: 0px; } footer{ background: url(img/mochaGrunge.jpg); opacity: 1; } #stageone{ background: url(img/mochaGrunge2.jpg); padding: 85px 0px 250px 0px; border-bottom: #999999 solid 2px; } #stageone article{ float:left; width: 33.3%; text-align: center; position: relative; } article#one img#words{ position: absolute; left: 80%; } article#three #words{ position: absolute; left: -50px; top: 300px; } .wrap{ width: 90%; max-width: 1280px; } .info{ clear:both; text-align:center; } .position{ font-family: langdon; color: #FFFFFF; font-size: 20px; text-align: center; } .title{ font-family: langdon; font-size: 60px; text-align: center; display:inline; color:#37a0d0; } .description{ font-size: 14px; width: 70%; margin: 0 auto; line-height: 16px; } .blueline{ background: #999999; height: 1px; width: 70%; margin: 0 auto; margin-top: 20px; margin-bottom: 20px; } .blueline img{ position: relative; top: -18px; } #removable{ background: #f4f4f4; height: 650px; } #bootup{ position: relative; float:left; margin-top: -150px; max-width: 50%; } #right .inner{ text-align: right; position: relative; top: 100px; } #right a{ margin-top: 10px; } @media only screen and (max-width: 1024px){ article#three #words{ position: absolute; left: -70px; top: 300px; } } @media only screen and (max-width: 838px) { #instructions{ width: 40%; } } @media only screen and (max-width: 768px) { .content{ max-width: 700px; } #home img{ width: 60%; } #instructions h1{ font-size: 50px; } h1{ font-size: 50px; } #instructions p{ color: #222222; font-size: 14px; line-height: 18px; } h1{ padding-bottom: 10px; } a.ctabox{ color: #FFFFFF; background: url(img/subtle_grunge_blue.png) top; display: inline-block; padding: 10px; font-family: langdon; letter-spacing: 1px; margin-top: 20px; -webkit-transition: color .3s ease-in-out; -moz-transition: color .3s ease-in-out; -o-transition: color .3s ease-in-out; -ms-transition: color .3s ease-in-out; } img.shoez{ height: 500px; } img.words{ display:none; } a.view{ display:none; } } @media only screen and (max-width: 700px) { #home #instructions{ float:none; clear:both; width: 100%; } #home .content img{ width: 40%; float:none; position: relative; margin-left: -20%; left: 50%; } #home{ text-align:center; } #home .winter{ font-size: 12px; } #home p{ display:none; } #stageone article{ float:none; width: 100%; text-align: center; position: relative; } img#sparespike2{ display:block; } img#sparespike{ display:none; } img.shoez{ height: auto; } #bootup{ position: relative; float:none; margin-left: -40%; left: 50%; margin-top: -150px; max-width: 80%; } #right{ width: 100%; } #right .inner{ text-align: left; position: relative; top: 0px; } .modal { position: absolute; margin-top: 0px; top: 30%; left: 50%; z-index: 1050000; width: 98%; margin-left: -49%; background: url(img/subtle_grunge.png); border: 1px solid #999; border: 1px solid rgba(0, 0, 0, 0.3); *border: 1px solid #999; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; outline: none; -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); -webkit-background-clip: padding-box; -moz-background-clip: padding-box; background-clip: padding-box; } .modal h1#myModalLabel{ font-size: 30px; } a.ctabox{ color: #FFFFFF; background: url(img/subtle_grunge_blue.png) top; display: inline-block; padding: 10px; font-family: langdon; letter-spacing: 1px; margin-top: 0px; -webkit-transition: color .3s ease-in-out; -moz-transition: color .3s ease-in-out; -o-transition: color .3s ease-in-out; -ms-transition: color .3s ease-in-out; } a.ctabox.view{ display:none; } a.learn{ display:inline-block; } #contactForm div{ float:none !important; } }