* { outline: none; } body { font-family: Helvetica Neue,HelveticaNeue,Helvetica,Arial,Verdana,sans-serif; font-style: normal; color: #333333; } #mainWrapper { margin: 0 auto; width: 1015px; } #main { width: 945px; margin: 35px 35px 65px; border-top: 1px solid #000000; } /* Japan Relief */ #relief {border-top:1px solid #000;padding:5px 0;width:945px;margin: 10px 35px -35px;} #relief h2 {color: #FFF; background: #F24E40; text-align: center; letter-spacing: 0.06em; font-size: 13px; font-weight: normal; font-family: Arial, sans-serif; padding: 5px;} #relief .intro {color: #000;text-transform: uppercase; font-weight: bold; font-size: 10px;} .clear { clear: both; } p { padding-bottom: 20px; font-size: 14px; line-height: 16px; } em { font-style: italic; } h1, a, .active li strong { font-weight: bold; text-decoration: none; } h1, a, .active li.hover, .active li strong { color: #ff3333; } a:hover { text-decoration: underline; } h1 { font-size: 65px; line-height: 53px; padding-top: 16px; letter-spacing: -0.03em; } h1 a:hover { text-decoration: none; } h2 { font-size: 25px; line-height: 27px; font-weight: bold; color: #000000; padding-top: 2px; letter-spacing: -0.03em; } h3 { font-size: 35px; line-height: 32px; font-weight: bold; color: #000000; padding-bottom: 10px; } h4 { font-size: 26px; line-height: 25px; font-weight: bold; color: #000000; padding-bottom: 10px; } h5 { font-size: 17px; font-weight: bold; color: #000000; padding-bottom: 10px; } .row > h5 { padding-top: 15px; } /* /* Columns /* /**********************/ .col { float: left; padding-left: 15px; } .colFirst { padding-left: 0; margin-left: 0; } .colx1 { width: 65px; } .colx2 { width: 145px; } .colx3 { width: 225px; } .colx4 { width: 305px; } .colx6 { width: 465px; } .colx8 { width: 625px; } .colBorder, .colMargin { margin: 20px 0px 20px 0px; } .colBorder { margin-left: 7px; padding-left: 7px; border-left: 1px solid #cccccc; } .colMarginSmall { margin-top: 15px; margin-bottom: 15px; } .colMarginSmallBottom { margin-bottom: 15px; } .colMarginSmallTop { margin-top: 7px; } .colMarginNoTop { margin-top: 0px; } /* /* Rows /* /**********************/ .row { border-bottom: 1px solid #000000; } .rowBlack { border-color: #000000 !important; } .rowSpace { padding-bottom: 7px; } .rowLast { border: none !important; margin: 0px !important; padding: 0px !important; } .rowHeader .col { height: 355px; } .rowHeader .colBorder { height: 315px; } .rowBody > .col { height: 826px; } .rowBody p { padding: 0 0 10px; font-size: 13px; line-height: 17px; } .rowBody .row { margin-bottom: 7px; border-bottom: 1px solid #CCCCCC; } /* /* Positions /* /**********************/ .left, .right, .top, .bottom { position: absolute; } .left { left: 0px; } .colBorder .left { left: 7px; } .top { top: 0px; } .bottom { bottom: 0px; } .right { right: 0px; } /* /* Lists /* /**********************/ .rowHeader li { padding: 15px 0; border-bottom: 1px solid #cccccc; } .rowHeader li.last { border: none; } .rowHeader li p { padding: 25px 6px; font-size: 15px; font-weight: bold; } .rowHeader li .icon { height: 66px; display: inline-block; } .rowHeader li .icon a { display: block; width: 66px; height: 66px; background-repeat: no-repeat; } #buy { width: 86px; height: 86px; background: url('../images/icon_buy.png'); position: absolute; top: 0px; left: -13px; } .sale #buy { width: 86px; height: 86px; background: url('../images/icon_buy-sale.png'); position: absolute; top: 0px; left: -13px; } .active li strong { } .active li.hover { cursor: pointer; } .active li.hover a { text-decoration: none; } #try { background: url('../images/icon_try.png'); } #read { background: url('../images/icon_read.png'); } .go { background: url('../images/icon_go.png'); } .active li.hover #buy { background-position: 0px -86px; } .stateTwo { display: none; opacity:0; filter:alpha(opacity=0); } li.stateTwo .col { padding-right: 15px; padding-left: 0; } li.stateTwo .colFirst { padding-left: 15px; padding-right: 0; width: 210px; } li.stateTwo p { padding: 17px 6px; } .active li.hover #try, .active li.hover #read, .active li.hover .go { background-position: 0px -66px; } .rowHeader li p.buy { padding: 27px 6px; } .rowHeader li div.buy { position: relative; height: 87px; width: 65px; } .rowHeader li .ctnt { height: auto; } #share { padding-top: 10px; border-top: 1px solid #CCCCCC; } #share li { padding-bottom: 10px; font-size: 12px; background-repeat: no-repeat; height: 30px; padding-left: 80px; } #share li#delicious { background-image: url('../images/icon_delicious.png'); } #share li#facebook { background-image: url('../images/icon_facebook.png'); } #share li#subtraction { background-image: url('../images/icon_subtraction.png'); } #share li#twitter { background-image: url('../images/icon_twitter.png'); } #share li span { display: inline-block; margin-top: 7px; } .red li { font-size: 13px; padding-bottom: 15px; background: url('../images/icon_red.png') no-repeat 0px 3px; padding-left: 15px; } .black li { background-image: url('../images/icon_black.png'); } #improvements .col { height: 127px; overflow: hidden; } #requirements .col { height: 65px; overflow: hidden; } /* /* Header /* /**********************/ #basicMaths { position: relative; } #basicMaths.version1-1 .colx3.top { background: url('../images/icon_version.png') no-repeat right 20px; } #basicMathsImageCtnr { height: 338px; } /* /* Footer /* /**********************/ #footer { padding-top: 10px; } #footer p { padding: 0px; font-size: 11px; } /* /* Art /* /**********************/ .art { } .artBottom { margin-bottom: 10px; } #frame { background: url('../images/art_frame.png'); height: 348px; width: 301px; } .hover #frame { background-position: 0 348px; } #color { background: url('../images/art_color.png'); height: 258px; width: 145px; } .hover #color { background-position: 0 258px; } #video { background: url('../images/art_video.png'); height: 250px; width: 139px; } .hover #video { background-position: 0 250px; } #ruler { background: url('../images/art_ruler.png'); height: 259px; width: 465px; } .hover #ruler { background-position: 0 259px; } #wordpress3 { background: url('../images/art_wordpress3.png'); height: 134px; width: 139px; } .hover #wordpress3 { background-position: 0 134px; } #iPhone { background: url('../images/art_iPhone.png'); height: 159px; width: 306px; } .hover #iPhone { background-position: 0 159px; } /* /* Hover /* /**********************/ .hover h1, .hover h2, .hover h3, .hover h4, .hover h5, .hover h6, .hover p { color: #ff3333; } p.view { display: inline-block; background: url('../images/bg_view.png'); width: 52px; height: 10px; padding-top: 3px; padding-left: 12px; color: #FFFFFF; font-size: 12px; text-transform: uppercase; } .hover p.view { background-position: 0 23px; color: #FFFFFF; } .block { cursor: pointer; } /* /* Overlay / Popups /* /**********************/ #overlay { background-color: #000000; opacity:0.4; filter:alpha(opacity=40); position: fixed; top: 0; left: 0; height: 100%; min-height: 1676px; width: 100%; min-width: 1015px; z-index: 1; display: none; } .popup { background-color: #000; color: #FFF; border: 1px solid #000; position: absolute; z-index: 2; display: none; } .popupCtnt { padding: 20px 20px 7px; width: 603px; } .popupCtnt h6 { font-size: 25px; line-height: 27px; width: 543px; float: left; font-weight: bold; } .popupCtnt p { font-size: 13px; } .popupCtnt h6, .popupCtnt img, .popupCtnt p { padding-bottom: 13px; } .close { display: block; height: 30px; width: 30px; background: url('../images/close.png'); float: right; cursor: pointer; } .closeHover { background-position: 0 30px; } /* /* Upgrade /* /**********************/ .upgrade { padding-top: 20px; padding-left: 25px; } input { margin-top: 15px; width: 330px; font-size: 27px; } a#submit { text-indent: -10000px; display: inline-block; height: 66px; width: 66px; background: url('../images/icon_submit.png'); position: relative; top: -27px; margin-left: 15px; cursor: pointer; } a#submit:hover { background-position: 0px 66px; } h5.last { padding-top: 15px; } .error { color: #FF3333; } /* /* Documentation /* /**********************/ .doc h1 {font-family:Helvetica,HelveticaNeue,Arial,Verdana,sans-serif;font-weight:800;} .doc textarea, .doc code {background:#FFFFCC;display:inline-block;padding:0 5px; margin:0; border:none;} .doc strong {font-weight: 600;} .doc em {font-style:italic;} .doc .caps {text-transform:uppercase;} .doc .js #flash {display: none;} .doc .hide {visibility:hidden;} .doc .highlight {color:#FF3333;} .doc #documentation { } .doc {padding-top: 20px;padding-left: 25px;} .rowHeader .colBorder.doc {height: 100%;width:605px; font-size:12px; line-height:18px;} .rowHeader .colBorder.doc {} #basicMathsLinks {margin-top: 240px; width: 150px;} #basicMathsLinks h3 {font-size:14px; line-height:18px;margin-bottom:10px;} .instruction {width:605px; padding-right:0px;clear:both;display:table; font-size: 12px; line-height:18px; padding-top:11px; border-top:1px dotted #DDD;} #uploadinstall {border-top:none;padding-top:0;} .screenshot h2, .instruction h2 {width: 605px; padding:0; text-transform:uppercase; font-size: 14px; line-height:18px; letter-spacing:0;} .screenshot h2 span.desc, .instruction h2 span.desc {font-size: 12px; text-transform:none; border-left: 3px solid #000; padding-left:5px; margin-left:5px;} .instruction h3 {width:200px; float:left; clear:left;margin:0 -365px 18px 0; padding:0; font-size: 12px; line-height:18px; letter-spacing:0;} .instruction h3 span.desc {display:block;font-weight:400;} .instruction li {padding:0; border:none;} .instruction ul li {list-style: square outside;} .instruction ol li {list-style: decimal outside;} .instruction p, .instruction ol, .instruction ul, .instruction object, .instruction iframe {float:left; clear:right; margin-left:225px; margin-bottom:18px; font-size: 12px; line-height:18px;}