/* CONTENTS ---------- 1.0 RESETS & STRUCTURE 2.0 FONT COLOURS 3.0 LOGO, STRAPLINE, FOOTER 4.0 REQUEST AN INVITE 5.0 CONTENT ACCORDIAN - 5.1 TAB: SNEAK PEAK - 5.2 TAB: VIDEO - 5.3 TAB: FEATURES - 5.4 TAB: DOWNLOAD - 5.5 TAB: TRIAL 6.0 TERMS 7.0 SIGN UP (CREATE ACCOUNT) ------------------- /* 1.0 RESETS & STRUCTURE ---------------------------------------------------------------------- */ html, body { background:#e2e2e2; } body { margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:13px; border-top:6px solid #464646; } ::selection { background: #abc74b; color:#e6f1c1; text-shadow:none; } ::-moz-selection { background: #abc74b; color:#e6f1c1; text-shadow:none; } p, input, label, DIV, ul, li { list-style:none; padding:0; margin:0; } a, img, input, button, textarea { border:none; outline:none; text-decoration:none; resize:none; } #prevue { margin:0px auto; width:750px; } .bubble { float:left; background:#fff; -khtml-border-radius:8px; -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; position:relative; margin:40px 0 5px 0; } #pointer, #vidpointer { float:left; width:56px; height:23px; background:url(../gfx/sprite.png) no-repeat; overflow:hidden; text-indent:-9000px; top:-23px; left:35px; position:absolute; background-position:-81px -16px; } /* 2.0 FONT COLOURS ---------------------------------------------------------------------- */ .darkgrey { color:#464646; } .midgrey { color:#999797; } .emphasis { color:#5e6367; } .green { color:#93bb0b; } #requestArea #email.focused, #requestArea #email.changed { color:#464646; } /* 3.0 LOGO, STRAPLINE, FOOTER ---------------------------------------------------------------------- */ #header { float:left; width:750px; margin:110px 0 0 0; position:relative; } #header h1, #header h2 { float:left; width:550px; margin:0 0 0 110px; padding:0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; } #header h1 { font-size:21px; } #header h2 { font-size:20px; } #header a#prevueLogo { width:59px; height:41px; background:url(../gfx/sprite.png) left top no-repeat; overflow:hidden; text-indent:-9000px; position:absolute; left:0; top:0; } #header #logo { width:59px; height:41px; background:url(../gfx/sprite.png) left top no-repeat; overflow:hidden; text-indent:-9000px; position:absolute; left:0; top:0; } #header a#login, #header a#return { font-weight:bold; color:#fff; -khtml-border-radius:8px; -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; padding:6px; font-size:12px; position:absolute; top:-65px; } #header a#login { background:#464646; right:0; } #header a#return { background:#93bb0b; left:110px; } #header a:hover#login { background-color:#93bb0b; } #header a:hover#return { background-color:#80a502; } #footer { float:left; width:645px; margin:80px 0 0 0; padding:0 0 80px 105px; color:#a4adb4; } #footer a { color:#a4adb4; font-style:italic; display:inline; margin:0 5px; } #footer a:hover { color:#898f94; } /* 4.0 REQUEST AN INVITE ---------------------------------------------------------------------- */ #requestArea { float:left; width:640px; margin:45px 0 0 110px; background:#464646; padding:15px 0 15px 0; min-height:38px; } #requestArea label { float:left; width:320px; background:#fff; -khtml-border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; height:38px; overflow:hidden; margin:0 0 0 15px; min-height:38px; } #requestArea #email { float:left; width:300px; border:none; background:#fff; padding:10px 10px 0 10px; margin:0; height:28px!important; overflow:hidden; -khtml-border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; font-size:12px; color:#ccc; } #requestArea #buttons { float:left; position:relative; margin:0 0 0 5px; width:121px; height:38px; background:url(../gfx/sprite.png) right top no-repeat; } #requestArea #button { display:inline-block; width:121px; height:38px; overflow:hidden; border:none; padding:0; position:absolute; top:0; left:0; z-index:200; background:url(../gfx/sprite.png) right no-repeat; background-position:-379px -38px; text-indent:-9000px; cursor:pointer; } #requestArea input:hover#button, #requestArea input:focus#button { background-position:-379px -76px; } #requestArea #loading { display:inline-block; width:121px; height:38px; overflow:hidden; background:url(../gfx/loading.gif) center no-repeat; position:absolute; top:0; left:0; z-index:0; } #requestArea #message { float:left; margin:0 0 0 25px; height:38px; line-height:38px; color:#e2e2e2; } #requestArea #message #icon { float:left; width:16px; height:16px; margin:10px 20px 0 0; background:url(../gfx/sprite.png) no-repeat; text-indent:-9000px; overflow:hidden; } #requestArea #message #icon.success { background-position:-484px -114px; } #requestArea #message #icon.error { background-position:-484px -130px; } #requestArea #message a { color:#9bc400; border-bottom:1px dotted #9bc400; } #requestArea #message a:hover { color:#fff; border-color:#fff; } /* 5.0 CONTENT ACCORDIAN ---------------------------------------------------------------------- */ ul#content { float:left; width:750px; border-top:1px solid #f1f1f1; margin:60px 0 0 0; } ul#content.trial { position:relative; } ul#content.trial a#prevueLogo { width:59px; height:41px; background:url(../gfx/sprite.png) left top no-repeat; overflow:hidden; text-indent:-9000px; position:absolute; left:0; top:5px; } ul#content li { float:left; width:750px; border-bottom:1px solid #f1f1f1; } ul#content.trial, ul#content.trial li { border:none; } ul#content li a.row { float:left; width:640px; padding:20px 0 20px 110px; color:#999797; font-weight:bold; font-size:23px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; } ul#content li h3 { float:left; width:640px; padding:0px 0 20px 110px; color:#999797; font-weight:bold; font-size:23px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; margin:0; } ul#content li h3 .darkgrey { text-shadow:1px 1px #f1f1f1; } ul#content li a.row .darkgrey { text-shadow:1px 1px #f1f1f1; } ul#content li a:hover.row .darkgrey { color:#93bb0b; } ul#content li a.selected { background:url(../gfx/sprite.png) left center no-repeat; } ul#content li a.selected .darkgrey { color:#93bb0b; } ul#content DIV.content { float:left; width:640px; margin:0 0 50px 110px; } ul#content DIV.content p { float:left; color:#898f94; font-size:14px; line-height:18px; } /* 5.1 TAB: SNEAK PEAK */ ul#content #sneakPeak p { width:560px; } ul#content #sneakPeak .bubble { padding:40px; } ul#content #sneakPeak ol#thumbs { float:left; width:auto; margin:0; padding:0; } ul#content #sneakPeak ol#thumbs li { float:left; width:130px; height:130px; border:none; } ul#content #sneakPeak ol#thumbs li a { float:left; border:5px solid #fff; } ul#content #sneakPeak ol#thumbs li a:hover { border-color:#464646; } /* 5.2 TAB: VIDEO */ ul#content #video #relative { float:left; position:relative; margin:10px 0 0 0; padding:0; } #vidpointer { top:0; } ul#content ul#videoThumbs { float:left; width:640px; margin:5px 0 0 0; padding:0; } ul#content ul#videoThumbs li { float:left; width:auto; border:none; margin:0 15px 0 0; } ul#content ul#videoThumbs li a { float:left; border:5px solid #fff; width:115px; height:84px; background:url(../gfx/videothumbs.gif) no-repeat; text-indent:-9000px; } ul#content ul#videoThumbs li a:hover, ul#content ul#videoThumbs li a.playing { border-color:#464646; } ul#content ul#videoThumbs li a.thumb1 { background-position:top left; } ul#content ul#videoThumbs li a.thumb2 { background-position:0 -84px; } ul#content ul#videoThumbs li a.thumb3 { background-position:0 -178px; } ul#content ul#videoThumbs li a.thumb4 { background-position:0 -272px; } ul#content #video .bubble { width:620px; height:349px; overflow:hidden; padding:10px; margin-top:23px; } ul#content #video #vidpointer.video2 { left:174px; } ul#content #video #vidpointer.video3 { left:314px; } ul#content #video #vidpointer.video4 { left:454px; } /* 5.3 TAB: FEATURES */ ul#content #features h3 { float:left; clear:both; width:auto; font-weight:normal; color:#e6f1c1; font-size:14px; background:#9ec51d; padding:8px; margin:10px 0 10px 0; } ul#content #features p { clear:both; width:510px; margin:0 0 20px 0; } ul#content #features p a { border-bottom:1px dotted #9ec51d; color:#9ec51d; } ul#content #features p a:hover { border-color:#93bb0b; color:#93bb0b; } ul#content #features p.last { margin-bottom:0; } /* 5.4 TAB: DOWNLOAD */ ul#content #download p { padding-right:205px; width:435px; margin-bottom:30px; } ul#content #download ul#included { float:left; width:300px; margin:0; padding:0; } ul#content #download ul#included li { float:left; width:282px; background:url(../gfx/sprite.png) left no-repeat; background-position:0 -168px; margin:0; padding:7px 0 7px 18px; border-bottom:1px dotted #fff; color:#464646; } ul#content #download #downloadInfo { float:right; width:300px; } ul#content #download #downloadInfo #downloadLink { float:left; clear:both; width:144px; height:38px; overflow:hidden; background:url(../gfx/sprite.png) no-repeat; background-position:-235px -38px; margin:0 0 20px 0; text-indent:-9000px; } ul#content #download #downloadInfo em { float:left; clear:both; font-size:12px; color:#a4adb4; line-height:18px; } /* 5.5 TAB: TRIAL */ ul#content li.trial p { float:left; color:#898f94; font-size:14px; line-height:18px; width:445px; margin:0 0 50px 110px; padding:0 195px 0 0; background:url(../gfx/sprite.png) top no-repeat; background-position:120px -460px; } /* 6.0 TERMS ---------------------------------------------------------------------- */ #terms { float:left; width:600px; margin:45px 0 0 0; padding:0 0 0 110px; } #terms p { float:left; color:#898f94; font-size:12px; line-height:18px; margin:0 0 20px 0 } #terms p.forward { color:#93bb0b; } #terms h1 { float:left; width:600px; padding:0; margin:0 0 30px 0; color:#464646; font-size:21px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; } #terms h2 { float:left; width:600px; padding:0; margin:20px 0 20px 0; color:#464646; font-weight:bold; font-size:18px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; } #terms ul { float:left; } #terms ul li { float:left; width:600px; color:#898f94; font-size:12px; line-height:18px; margin:0 0 20px 0 } /* 7.0 SIGN UP (CREATE ACCOUNT) ---------------------------------------------------------------------- */ li.signup .bubble { margin:30px 0 60px 110px; width:640px; background:#fff; } #signUp { float:left; width:560px; margin:40px; } #signUp label { float:left; width:560px; clear:both; margin:0 0 5px 0; color:#898f94; font-size:13px; } #signUp label #indicator { display:inline-block; width:16px; height:16px; margin:0 0 0 10px; } #signUp label #indicator.good { background:url(../gfx/sprite.png) no-repeat; background-position:-484px -114px; } #signUp label #indicator.bad { background:url(../gfx/sprite.png) no-repeat; background-position:-484px -130px; } #signUp label .spacer { display:inline-block; width:180px; } #signUp label input { display:inline-block; width:300px; border:1px solid #ccc; background:#fff; padding:10px; margin:0; -khtml-border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; font-size:12px; color:#464646; } #signUp label input:focus { border-color:#9B9B9B; } #signUp label#terms { width:380px; margin:0; padding:10px 0 10px 180px; font-size:12px; color:#ccc; } #signUp label#terms a { color:#898f94; } #signUp label#terms a:hover { color:#464646; } #signUp label#terms input { width:auto; border:none; margin:0 10px 0 0; } #signUp #button { float:left; margin:10px 0 0 180px; width:131px; height:38px; overflow:hidden; background:url(../gfx/sprite.png) no-repeat; background-position:-104px -58px; cursor:pointer; text-indent:-9000px; } #signUp #button:focus, #signUp #button:hover { background-position:-104px -96px; }