/* ==== Meyer's Reset v1.0 | 20080212 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
body {
line-height: 1; }
ol, ul {
list-style: none; }
:focus {
outline: 0; }
table {
border-collapse: collapse; border-spacing: 0; }
/* === general layout */
body {
font-family:Calibri,'Gill Sans','Franklin Gothic Medium',Helvetica,Arial,sans-serif; text-align:center; color:#666; }
.wrapper {
margin:0 auto; position:relative; text-align:left; width:960px; }
.wSmall {
width:712px; }
.wMedium {
width:960px; }
.wLarge {
width:1206px; }
.floated {
clear:both; }
.header, .feature {
background:url(../images/header_bg.png) repeat-x; padding:30px 0; }
h2 {
float:left; font-size:1.3em; line-height:3em; }
h3 {
font-size:20px; }
h4 {
background:url(../images/border_horizontal.png) repeat-x; font-size:16px; margin:40px 0 10px; }
h4 span {
position:relative; top:-9px; padding-right:3px; background:#fff; color:#ccc; }
/* ==== supplementary styles */
.clear {
height:1px; clear:both; }
.last {
border:0 !important; margin:0 !important; }
.shim {
clear:both; margin-bottom:40px; height:1px; }
.shim + .clear {
margin-top:-40px; }
.hilite {
background:#f8f4b7; padding:0 5px; color:#777; }
.info {
font-size:80%; }
.receipt {
font-size:150%; display:block; margin:10px 0 30px; }
/* ==== layer fix */
*, .testPrompt {
z-index:1; }
.header *, .testBox .actions ul {
z-index:999; }
/* ==== borders and corners */
#userBox, .testBox, .button, button, .prompt, #testSummary,
.result li, .tokenPromo, .tokenBox, .resultBar, .confirm,
.imgUpload, .prompt fieldset, .option, .blog, .testLink
, .testLink input, .recentTests, .recentTests a, .siteSummary {
-moz-border-radius:6px; -webkit-border-radius:6px; }
.imgHolder, .priorityBox, .priorityTotal, .ui-slider-handle,
.ui-slider, .resultGraph {
-moz-border-radius:3px; -webkit-border-radius:3px; }
.priorityCurrent {
-moz-border-radius:3px 0 0 3px; -webkit-border-top-left-radius:3px; -webkit-border-bottom-left-radius:3px; }
#userBox ul, #testSummary .dropDown {
-moz-border-radius:0 0 6px 6px; -webkit-border-bottom-left-radius:6px; -webkit-border-bottom-right-radius:6px; }
#testSummary .testInfo li.active {
-moz-border-radius:6px 6px 0 0; -webkit-border-top-left-radius:6px; -webkit-border-top-right-radius:6px; }
.testBox, .imgHolder, .prompt, #testSummary, #testSummary
.testInfo li.active, .tokenPromo, .tokenBox, .resultBar,
.confirm, .prompt fieldset, .blog, .testLink, .testLink input,
.recentTests, .recentTests a, .siteSummary {
border:3px solid #eaeae3 !important; }
/* ==== buttons and links */
a {
color:#51b6e5; text-decoration:none; }
a:hover {
text-decoration:underline; }
a, .button, button, .dropTrigger, .ui-slider-handle {
cursor:pointer; }
a.button {
height:21px; padding:6px 10px 3px; font-size:16px; }
.button, button, .ui-slider-handle {
display:inline-block; border:2px solid #aeaeae; background:url(../images/button_bg.png) left center repeat-x #ddd; color:#878686; font-weight:bold; overflow:visible; padding:4px 6px 5px; font-family:inherit; font-size:16px; }
.button:hover, button:hover, .ui-slider-handle:hover {
background-color:#d5d5d5; text-decoration:none; }
.feature .button, .feature button, .summary button {
margin-top:10px; }
.summary button {
position:absolute; top:3px; right:0; }
.addTest, .confirmTest, .confirm button, .nextButton {
background:url(../images/button_bg.png) left center repeat-x #a2d3e7; border-color:#6aa6be; color:#3d7b94; }
.confirm button span, .confirmTest span {
background:url(../images/btnConfirm.png) left center no-repeat; padding:5px 0 5px 23px;}
.addTest span {
background:url(../images/btnAdd.png) left center no-repeat; padding:5px 0 5px 23px;}
.nextButton span {
background:url(../images/btnNext.png) left center no-repeat; padding:5px 0 5px 23px;}
.btnTwitter {
width:268px; background-color:#cfeaed; color:#5db9c3; border-color:#8ccdd4; }
.btnTwitter:hover {
background-color:#c8e8ec; }
.btnTwitter span {
background:url(../images/btnTwitter.png) left center no-repeat; padding:5px 0 5px 23px;}
.addTest:hover, .confirmTest:hover, .confirm button:hover, .nextButton:hover {
background-color:#95c9de; }
/* === forms */
.response_input {
background:#eee; -moz-border-radius:3px; -webkit-border-radius:3px; width:276px; margin:5px 0 10px; padding:5px 0; text-align:center; }
.response_input input, .response_input select {
border:1px solid #ddd; padding:1px 0 2px; font-weight:bold; -moz-border-radius:3px; -webkit-border-radius:3px; width:264px; text-align:left; font-size:1.2em; }
input, textarea {
font-family:Calibri,'Gill Sans','Franklin Gothic Medium',Helvetica,Arial,sans-serif; }
/* ==== header */
h1 {
height:48px; width:250px; }
h1 a {
display:block; text-indent:-9999px; background:url(../images/logo.png) no-repeat; height:48px; overflow:hidden; }
/* ==== user box */
#userBox, .userBox ul {
border:4px solid #1d2932; }
#userBox {
background:#25303a; color:#afb6bb; margin-top:-5px; padding:0 5px; position:absolute; right:0; top:0; width:250px; }
#userBox img {
float:left; margin:0.3em 10px 0.3em 0; }
.userInfo {
float:left; font-size:.8em; height:30px; line-height:1.1em; padding:10px 0; white-space:nowrap; }
#userBox .dropHolder, #userBox ul {
width:250px; }
#userBox ul {
background:#1d2932; display:none; padding:0 9px 3px; position:absolute; right:-4px; top:50px; }
#userBox li {
border-bottom:1px solid #49545b; font-size:.75em; padding:5px 0; text-align:right; }
#userBox span {
float:left; }
#userBox .dropTrigger {
background:url(../images/user_options.png) 10px center no-repeat #1d2932; height:50px; position:absolute; right:0; top:0; width:42px; }
#userBox .dropTrigger.active {
background-position:-34px center; }
/* ==== site summary */
.siteSummary {
background:#fafaf7; color:#999; margin-top:20px; font-size:13px; position:relative; }
.wSmall .siteSummary .second, .wSmall .siteSummary .last { width:250px; }
.wMedium .siteSummary .second, .wMedium .siteSummary .last { width:350px; }
.wLarge .siteSummary .second, .wLarge .siteSummary .last { width:450px; }
.siteSummary h3 {
position:absolute; left:10px; top:5px; }
.siteSummary table {
width:99%; border-collapse:collapse; margin:15px .5% 10px; }
.siteSummary td {
border-bottom:1px solid #eee; padding:5px 5px 6px; text-align:center; font-weight:bold; font-size:16px; }
.siteSummary th {
border-bottom:1px solid #eee; font-weight:normal; padding:5px 5px 6px; }
.siteSummary .last { border-bottom:0 !important; }
.siteSummary .headerStat * {
text-align:center; }
.siteSummary .premStat {
background:#f4e4a7; color:#b0942f; border-bottom-color:#ebdca1; }
th.premStat {
font-weight: bold; -moz-border-radius:6px 6px 0 0; -webkit-border-radius-top-left:6px; -webkit-border-radius-top-right:6px; }
th.premStat .icon {
background:url(../images/label_premium.png); width:34px; height:34px; position:absolute; margin-top:-22px; margin-left:-22px;}
td.premStat.last {
-moz-border-radius:0 0 6px 6px; -webkit-border-radius-bottom-right:6px; -webkit-border-radius-bottom-left:6px; }
.summary {
clear:both; position:relative; background:url(../images/border_horizontal.png) left bottom repeat-x; height:4em; margin-bottom:40px; }
/* ==== test container styles */
.testBox, .prompt {
background:#fafaf7; width:200px; height:240px; max-height:270px; float:left; position:relative; }
.testInfo {
color:#c5c4c1; font-size:.75em; float:left; padding:10px; width:127px; }
.testBox .icon {
width:34px; height:34px; position:absolute; top:-20px; left:-20px; z-index:1000; }
.tBronze .icon, .tSilver .icon, .tGold .icon {
width:40px !important; height:39px !important; left:-22px !important; top:-22px !important; }
.testInfo h3 {
font-size:16px; color:#999; margin:-5px 0 2px; }
.testBox .icon.memory { background:url(../images/label_memory.png) no-repeat; }
.testBox .icon.click { background:url(../images/label_click.png) no-repeat; }
.disabled .icon { background:url(../images/label_disabled.png) no-repeat !important; }
.tBronze .icon.click { background:url(../images/label_bronzeClick.png) no-repeat !important; }
.tBronze .icon.memory { background:url(../images/label_bronzeMemory.png) no-repeat !important; }
.tSilver .icon.click { background:url(../images/label_silverClick.png) no-repeat !important; }
.tSilver .icon.memory { background:url(../images/label_silverMemory.png) no-repeat !important; }
.tGold .icon.click { background:url(../images/label_goldClick.png) no-repeat !important; }
.tGold .icon.memory { background:url(../images/label_goldMemory.png) no-repeat !important; }
.imgHolder {
background:url(../images/img_bg.png); height:120px; margin:5px 0 15px; overflow:hidden; text-align:center; width:120px; }
.imgHolder img {
width:120px; height:120px; }
.testInfo p {
margin-bottom:10px; white-space:nowrap; }
.testInfo a {
font-size:16px; }
.priorityFlagged, .priorityLocked {
color:#8b8b86; padding:4px 0 5px 15px; background-color:#eaeae3 !important; -moz-border-radius:4px; -webkit-border-radius:4px; }
.priorityLocked {
background:url(../images/icon_mini_lock.png) 3px center no-repeat; padding-left:12px; }
.priorityFlagged {
background:url(../images/icon_mini_disable.png) 3px center no-repeat; }
.priorityBox {
font-size:.9em; font-weight:bold; position:relative; margin-top:2px; padding:3px; background:#eaeae3; }
.priorityTotal {
width: 100px; background:#fff; }
.priorityCurrent {
text-indent:-999em; height:15px; }
.priorityBox a {
position:absolute; right:0; top: 0; background:url(../images/priority_options.png) 6px center no-repeat; display:block; height:21px; width:23px; }
.priorityBox a span {
visibility:hidden; }
.priorityBox a:hover {
background:url(../images/priority_options.png) -19px center no-repeat; text-decoration:none; }
/* ==== test container actions */
.testBox .actions {
background:#eaeae3; position:absolute; right:0; top:0; overflow:hidden; height:240px; width:53px; max-height:270px; border-left:3px solid #fafaf7; }
.testBox .actions ul {
width:53px; height:14em; background:#eaeae3; margin:10px 0; position:absolute; border-right:1px solid #d6d6cf; }
.testBox .actions ul a {
background-image:url(../images/test_actions.png); background-repeat:no-repeat; color:#8f8f86; display:block; font-size:12px; font-weight:bold; margin-bottom:12px; padding-top:30px; text-align:center; }
.testBox .actions ul a:hover, .testBox .actions a.active {
color:#51b6e5; text-decoration:none; }
.actionUpgrade { padding-top:40px !important; background:url(../images/icon_upgrade_out.gif) center -3px no-repeat !important; }
.actionMoreResults { padding-top:40px !important; background:url(../images/icon_upgrade_out.gif) center -3px no-repeat !important; }
.actionShare { background-position:14px -53px; }
.actionUnlock { background-position:14px -163px; }
.actionLock { background-position:14px -220px; }
.actionAppeal { background-position:14px -280px; }
.actionDelete { background-position:14px -106px; }
.actionUpgrade:hover, .actionUpgrade.active { background:url(../images/icon_upgrade_over.gif) center -3px no-repeat !important; }
.actionMoreResults:hover, .actionMoreResults.active { background:url(../images/icon_upgrade_over.gif) center -3px no-repeat !important; }
.actionShare:hover, .actionShare.active { background-position:-48px -53px; }
.actionUnlock:hover, .actionUnlock.active { background-position:-49px -163px; }
.actionLock:hover, .actionLock.active { background-position:-49px -220px; }
.actionAppeal:hover, .actionAppeal.active { background-position:-49px -280px; }
.actionDelete:hover, .actionDelete.active { background-position:-48px -106px; }
.premium .actionUpgrade, .disabled .actionUpgrade, .disabled .actionShare {
display:none !important; }
.testPrompt {
position:absolute; height:240px; right:0; font-size:11px; font-weight:bold; color:#8f8f86; padding:10px 7px 0 10px; width:130px; }
.testPrompt div {
display:none; }
.testPrompt p {
margin-bottom:5px; font-size:13px; }
.testPrompt a {
margin-left:1px !important; }
.testPrompt .close {
position:absolute; bottom:25px; right:10px; }
.testPrompt button {
width:130px; clear:left; margin-bottom:5px; }
.testPrompt .loading {
display:block; color:#848275; line-height:22px; margin:65% 0 0 19%; padding:10px 0 10px 25px; background:url(../images/throbber22.gif) left center no-repeat; }
.sharePrompt {
text-align:right; }
.sharePrompt p {
text-align:left; }
.sharePrompt input {
width:125px; text-align:left; margin-bottom:2px; font-size:11px; color:#444; }
.sharePrompt .shareTwitter, .sharePrompt .shareFacebook, .sharePrompt .shareEmail {
float:none; background:url(../images/share_actions.png) no-repeat; display:inline-block; height:15px; margin-left:5px; overflow:hidden; text-indent:-9999px; text-align:left !important; }
.sharePrompt .shareTwitter { width:11px; background-position:-101px 1px; }
.sharePrompt .shareFacebook { width:16px; background-position:-100px -39px; }
.sharePrompt .shareEmail { width:19px; background-position:-98px -78px; }
.sharePrompt .shareTwitter:hover { background-position:-144px 1px; }
.sharePrompt .shareFacebook:hover { background-position:-143px -39px; }
.sharePrompt .shareEmail:hover { background-position:-141px -78px; }
/* ==== test summary styles */
#testSummary {
background:#fafaf7; position:relative; height:66px; padding:5px; margin:30px 205px 40px 0; z-index:1000; }
/*
.wSmall #testSummary { width:696px; }
.wMedium #testSummary { width:690px; }
.wLarge #testSummary { width:690px; }
*/
#testSummary > div {
float:left; }
#testSummary .imgHolder {
height:60px; width:60px; margin:0; }
#testSummary img {
height:100%; width:100%; }
#testSummary .testInfo {
width:375px; }
.wMedium #testSummary .testInfo, .wLarge #testSummary .testInfo { width:550px !important; }
#testSummary .testInfo h3 {
padding:23px 0 10px 98px; margin:-26px 10px -5px -98px; color:#999; float:left; }
#testSummary .memory { background:url(../images/label_memory.png) no-repeat; }
#testSummary .click { background:url(../images/label_click.png) no-repeat; }
#testSummary.disabled .click { background:url(../images/label_disabled.png) no-repeat; }
#testSummary.tBronze .click { background:url(../images/label_bronzeClick.png) no-repeat !important; }
#testSummary.tBronze .memory { background:url(../images/label_bronzeMemory.png) no-repeat !important; }
#testSummary.tSilver .click { background:url(../images/label_silverClick.png) no-repeat !important; }
#testSummary.tSilver .memory { background:url(../images/label_silverMemory.png) no-repeat !important; }
#testSummary.tGold .click { background:url(../images/label_goldClick.png) no-repeat !important; }
#testSummary.tGold .memory { background:url(../images/label_goldMemory.png) no-repeat !important; }
#testSummary.disabled h3 { background:url(../images/label_disabled.png) no-repeat !important; }
#testSummary .testInfo ul {
position:absolute; bottom:-3px; }
#testSummary .testInfo li {
float:left; padding: 11px 10px 8px; font-size:1.2em; font-weight:bold; }
#testSummary .testInfo li.active {
background:#fff; z-index:21; border-bottom:none !important; padding:8px 10px; }
#testSummary .testInfo li a {
text-decoration:none; color:#c5c4c1; }
#testSummary .testInfo li a:hover {
color:#51b6e5; }
#testSummary .testInfo li.active a {
color:#888; }
#testSummary .dropHolder {
width:250px; }
#testSummary .dropDown {
background:#eaeae3; display:none; padding:0 9px 3px; position:absolute; right:-3px; top:76px; }
#testSummary .dropDown li {
border-bottom:1px solid #c4c4be; font-size:12px; padding:5px 0; text-align:right; }
#testSummary .dropTrigger {
background:url(../images/test_options.png) 10px center no-repeat #eaeae3; height:76px; position:absolute; right:0; top:0; width:42px; }
#testSummary .dropTrigger.active {
background-position:-34px center; }
#testSummary.disabled .shareAction, #testSummary.disabled .upgradeAction,
#testSummary.disabled .lockAction, #testSummary.disabled .unlockAction,
#testSummary .appealAction { display:none; }
#testSummary.disabled .appealAction { display:block; }
#testSummary .shareAction input {
width:200px; text-align:right; margin-bottom:2px; font-size:12px; color:#444; font-weight:bold; }
#testSummary .shareAction a {
background:url(../images/share_actions.png) no-repeat; display:inline-block; height:15px; margin-left:5px; overflow:hidden; text-indent:-9999px; text-align:left; }
#testSummary .shareAction .shareTwitter { width:11px; background-position:-101px 1px; }
#testSummary .shareAction .shareFacebook { width:16px; background-position:-100px -39px; }
#testSummary .shareAction .shareEmail { width:19px; background-position:-98px -78px; }
#testSummary .shareAction .shareTwitter:hover { background-position:-144px 1px; }
#testSummary .shareAction .shareFacebook:hover { background-position:-143px -39px; }
#testSummary .shareAction .shareEmail:hover { background-position:-141px -78px; }
/* ==== result container styles */
.result {
width:181px; padding-left:25px; float:left; position:relative; padding-top:1px; }
.count {
border:2px solid #6aa6be; -moz-border-radius:10px; -webkit-border-radius:10px; background:#a2d3e7; color:#fff; font-size:.7em; font-weight:bold; display:block; width:1.4em; padding:.2em 0; text-align:center; position:absolute; top:0; left:0; }
.upvote .count {
background:#96bc49; border-color:#759e46; }
.downvote .count {
background:#bc4949; border-color:#9e4646; }
.result strong a{
display:inline-block; padding-right:14px; max-width:160px; overflow:hidden; background:url(../images/heart.png) right center no-repeat; }
.result .upvote strong a {
color:#96bc49; background:url(../images/heart_plus.png) right center no-repeat; }
.result .upvote strong {
color:#96bc49; }
.result .downvote strong a {
color:#bc4949; }
.result .downvote strong {
color:#bc4949; }
.result .info {
display:block; font-size:0.7em; margin:0.3em 0 0.5em; }
.result ul {
font-size:0.8em; font-weight:bold; line-height:1.3em; }
.result li {
background:#fafaf7; border:2px solid #eaeae3; color:#8b8b86; margin-top:0.2em; padding:3px; }
.testLink {
background:#fafaf7; padding:5px; margin-top:5px; width:372px; text-align:right; }
.testLink input {
border-width:1px !important; font-size:120%; font-weight:bold; color:#444; width:370px; margin-bottom:5px; text-align:left; }
.testLink a {
background:url(../images/share_actions.png) no-repeat; display:inline-block; height:14px; margin-left:5px; overflow:hidden; text-indent:-9999px; text-align:left; }
.testLink .shareTwitter { width:11px; background-position:-14px 0; }
.testLink .shareFacebook { width:16px; background-position:-13px -40px; }
.testLink .shareEmail { width:19px; background-position:-12px -79px; }
.testLink .shareTwitter:hover { background-position:-57px 0; }
.testLink .shareFacebook:hover { background-position:-56px -40px; }
.testLink .shareEmail:hover { background-position:-55px -79px; }
/* === report styles */
#upgradeForm fieldset {
position:relative; border-top:4px solid #eaeae3; width:500px; padding-top:10px; }
#upgradeForm legend {
padding-right:10px; }
#upgradeForm .count {
display:inline-block; margin-right:5px; position:static; }
#report_holder {
position:relative; margin:30px auto 50px; border:10px solid #eee; -moz-border-radius:5px; -webkit-border-radius:5px; z-index:30; }
#click_holder {
position:absolute; top:0; left:0; background:url(../images/pixel.png); z-index:50; cursor:pointer; }
#image_fader {
position:absolute; top:0; left:0; opacity:.7; filter: alpha(opacity=70); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; z-index:40; }
.clickMark {
position:absolute; height:20px; width:20px; background:url(../images/click.png) top no-repeat; display:none; }
.clickMark.ui-selected {
background:url(../images/click.png) bottom no-repeat; }
#clickBox {
background:#212C36; position:absolute; display:none; text-align:left; color:#fff; opacity:.9; border:2px solid #fff; -moz-border-radius:5px; -webkit-border-radius:5px; padding:5px 10px; z-index:80; }
#clickBox.single {
z-index:60; }
#clickBox strong {
display:block; padding-bottom:5px; margin-bottom:5px; white-space:nowrap; border-bottom:2px solid #fff; }
#clickBox ul {
list-style-position:inside; }
/* ==== footer styles */
.footer {
background:url(../images/border_horizontal.png) repeat-x; margin:40px 0 25px; text-align:right; font-size:.8em; padding-top:15px; clear:both; line-height:1.3em; }
/* ==== prompt styles */
.prompt {
text-align:left; padding:10px; position:relative; color:#8b8b86; max-height:none; display:none; }
.ui-dialog .prompt {
margin-left:0; }
.prompt h3 {
margin-bottom:10px; }
.prompt .count {
position:static; float:left; }
form .actions {
background:#eaeaea; padding:8px 10px; }
/* ==== test creation */
#addInstruction, #addQuestion {
display:none; }
#upgradeForm .actions {
width:502px; }
#upgradeForm .imgUpload {
width:100px; height:100px; background:url(../images/upload.png) center center no-repeat #eaeae3; padding:5px; }
#upgradeForm p {
clear:left; line-height:1.2em; }
.option {
background:url(../images/formats.png) no-repeat #eaeae3; padding:10px 5px 10px 45px; margin-bottom:5px; cursor:pointer; }
div.option * { cursor:pointer; }
.option input {
visibility:hidden; position:absolute; }
.option.active {
background-color:#a9c76e; color:#fff; }
#memoryOption {
background-position:5px 7px; }
#clickOption {
background-position:5px -42px; }
#memoryOption.active {
background-position:5px -93px; }
#clickOption.active {
background-position:5px -144px; }
/* ==== test upgrades */
#upgradeForm fieldset {
margin-bottom:30px; }
#upgradeOptions .actions, #upgradeExtras .actions {
width:502px; }
#upgradeOptions .actions em {
font-weight:bold;font-style:normal;font-size:24px; }
#upgradeOptions th {
font-weight:normal; }
#upgradeOptions td {
vertical-align:middle; }
.upgradeFree, .upgradeBronze, .upgradeSilver, .upgradeGold {
text-align:center; width:80px; padding:0 2px; font-weight:bold; }
#upgradeOptions th div, #upgradeOptions td div {
background-color:#eaeae3; padding:10px 0; cursor:pointer; }
#upgradeOptions .bottom span {
font-weight:normal !important; font-size:12px; display:block; }
#upgradeOptions .top {
-moz-border-radius:6px 6px 0 0; -webkit-border-top-left-radius:6px; -webkit-border-top-right-radius:6px; background:#dfdfd1; }
#upgradeOptions .bottom {
-moz-border-radius:0 0 6px 6px; -webkit-border-bottom-left-radius:6px; -webkit-border-bottom-right-radius:6px; padding-bottom:15px; }
#upgradeOptions .active { color:#fff; }
#upgradeOptions .upgradeFree .active { background-color:#a2d3e7; }
#upgradeOptions .upgradeFree .top.active { background-color:#85bbd1; }
#upgradeOptions .upgradeBronze .active { background-color:#d8c291; }
#upgradeOptions .upgradeBronze .top.active { background-color:#c2a76c; }
#upgradeOptions .upgradeSilver .active { background-color:#d4d4d4; }
#upgradeOptions .upgradeSilver .top.active { background-color:#c3c3c3; }
#upgradeOptions .upgradeGold .active { background-color:#efd26e; }
#upgradeOptions .upgradeGold .top.active { background-color:#e9c647; }
.upgradePriority td div {
background-image:url(../images/priority.png); background-repeat:no-repeat; text-indent:-9999px; }
.upgradePriority .upgradeFree div { background-position:center 10px; }
.upgradePriority .upgradeFree .active { background-position:center -190px; }
.upgradePriority .upgradeBronze div { background-position:center -40px; }
.upgradePriority .upgradeBronze .active { background-position:center -240px; }
.upgradePriority .upgradeSilver div { background-position:center -90px; }
.upgradePriority .upgradeSilver .active { background-position:center -290px; }
.upgradePriority .upgradeGold div { background-position:center -140px; }
.upgradePriority .upgradeGold .active { background-position:center -340px; }
.upgradeCustom td div, .upgradeAdditional td div {
background-image:url(../images/tickscrosses.png); background-repeat:no-repeat; text-indent:-9999px; }
.upgradeCustom .upgradeFree div { background-position:center 9px; }
.upgradeCustom .upgradeFree .active { background-position:center -41px; }
.upgradeCustom .upgradeBronze div { background-position:center 9px; }
.upgradeCustom .upgradeBronze .active { background-position:center -41px; }
.upgradeCustom .upgradeSilver div { background-position:center -91px; }
.upgradeCustom .upgradeSilver .active { background-position:center -142px; }
.upgradeCustom .upgradeGold div { background-position:center -91px; }
.upgradeCustom .upgradeGold .active { background-position:center -142px; }
.upgradeAdditional .upgradeFree div { background-position:center 9px;}
.upgradeAdditional .upgradeFree .active { background-position:center -41px;}
.upgradeAdditional .upgradeBronze div { background-position:center 9px; }
.upgradeAdditional .upgradeBronze .active { background-position:center -41px; }
.upgradeAdditional .upgradeSilver div { background-position:center 9px; }
.upgradeAdditional .upgradeSilver .active { background-position:center -41px; }
.upgradeAdditional .upgradeGold div { background-position:center -91px; }
.upgradeAdditional .upgradeGold .active { background-position:center -142px; }
.unregistered .upgradeBronze div, .unregistered .upgradeSilver div, .unregistered .upgradeGold div
{ opacity:.3; cursor:default !important; filter: alpha(opacity = 30); zoom:1; }
.unregistered #needRegister { display:block; background:url(../images/diffused.png) repeat; height:55px; left:247px; padding:90px 50px; position:absolute; text-align:center; width:155px; }
#needRegister { display:none; }
.unregistered #tokenAmount { display:none; }
#tokenAmount { display:block; }
#addQuestion {
margin-top:20px; }
#upgradeExtras .response_input {
width:475px; }
#upgradeExtras textarea, #upgradeExtras input {
width:460px; -webkit-border-radius:3px; -moz-border-radius:3px; border:1px solid #ddd; font-weight:bold; font-size:16px; color:#bbb; }
#upgradeExtras .active {
color:#333; }
span.tTip {
padding-right:15px; background:url(../images/info.png) right 5px no-repeat; }
/* ==== priority upgrade */
#priority {
width:306px !important; height:150px !important; }
.ui-slider {
background:#fff; border:3px solid #eaeae3; height:20px; width:300px; margin-top:5px; position:relative; }
.ui-slider-range {
top:0; left:0; height:100%; border:0 none; display:block; font-size:0.7em; position:absolute; z-index:1; }
.ui-slider-handle {
padding:0; display:block; height:24px; margin-left:-8px; top:-5px; width:10px;position:absolute; z-index:99999; }
.ui-widget-overlay {
background:#333; opacity:.7; height:100%; left:0; position:absolute; top:0; width:100%; z-index:1000; }
.ui-dialog-titlebar {
display:none; }
#priority h3 {
padding-left:43px; margin-bottom:15px; background:url(../images/heading_icons.png) 0 2px no-repeat; }
#priority .actions {
width:306px; }
#priority strong {
font-size:1.2em; line-height:.9em; }
#priority button {
margin-bottom:10px; }
#priority .buyMore {
position:absolute; bottom:2px; left:10px; font-size:12px; }
/* ==== token purchasing */
.tokenPromo {
background:#fafaf7; margin:20px 0; line-height:1.2em; color:#8b8b86; font-size:1.3em; }
.tokenPromo strong {
display:block; background:url(../images/promo_arrow.png) center bottom no-repeat; padding:15px 15px 27px; margin-bottom:-12px; }
.tokenSelect {
text-align:center; }
.tokenSelect table {
width:100%; margin:20px 0; }
.tokenBox, .confirm p {
background:url(../images/tokens2.png) no-repeat #fafaf7; }
.tokenBox {
cursor:pointer; width:100px; height:123px; margin:0 10px; text-align:center; position:relative; }
.tokenBox input {
visibility:hidden; }
#tokenAmount1, #tokenAmount2 , #tokenAmount3
{ background-position:-11px 15px; }
#tokenAmount5 { background-position:-108px 15px; }
#tokenAmount10 { background-position:-202px 15px; }
#tokenAmount25 { background-position:-283px 5px; }
#tokenAmount50 { background-position:-405px 5px; }
#tokenAmount1.active, #tokenAmount2.active, #tokenAmount3.active
{ background-position:-11px -77px; }
#tokenAmount5.active { background-position:-108px -77px; }
#tokenAmount10.active { background-position:-202px -77px; }
#tokenAmount25.active { background-position:-283px -87px; }
#tokenAmount50.active { background-position:-405px -87px; }
.tokenBox label {
display:block; margin-top:55px; font-size:80%; cursor:pointer; }
.tokenBox.active {
border-color:#6aa6be !important; background-color:#a2d3e7; }
.tokenBox.active label {
color:#3d7b94; }
.tokenBox.active strong {
background:#6aa6be; color:#fff; }
.tokenBox strong {
display:block; width:100%; padding:5px 0; background:#eaeae3; position:absolute; bottom:0; left:0; }
.confirm {
position:relative; clear:left; background:#fafaf7; width:220px; padding:10px 10px 10px 80px; margin:40px auto 0; }
.confirm strong {
display:block; margin:5px 0 10px; }
.confirm .icon {
background:url(../images/tokens.png) no-repeat; height:90px; width:80px; position:absolute; bottom:4px; left:-12px; }
/* ==== keyword styles */
.resultBar {
position:relative; top:-8px; margin-left:270px; padding:5px; background:#fafaf7; }
.resultGraph {
position:relative; background:#a9c76e; height:1.5em; overflow:hidden; z-index:10; }
.resultBar .over, .resultBar .under {
font-weight:bold; font-size:90%; margin-left:10px; position:absolute; white-space:nowrap; line-height:1.6em; }
.resultBar .over {
color:#fff; }
.resultBar .under {
color:#c5c4c1; position:absolute; left:5px; top:5px; z-index:5; }
.resultBar .info {
margin:5px 0; }
.keyword {
float:none; width:100%; padding:8px 0 0 30px; margin:0 0 20px -30px; }
.keyword .count {
left:auto; left:32px; top:8px; }
.keyword strong {
width:215px; float:left; margin:1px 0 0 30px; }
.keyword:hover, .keyword.ui-draggable-dragging {
background:url(../images/handle.png) left top no-repeat; }
.keyword .handle {
height:22px; width:22px; position:absolute; top:0; left:0; cursor:move; }
.keyword.ui-draggable-dragging {
font-size:80%; width:90% !important; z-index:90; opacity:.5; filter:alpha(opacity=50); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; z-index:90; cursor:move; }
.keyword.ui-draggable.ui-state-active .count {
border-color:#697f3f; background:url(../images/countAdd.png) center center no-repeat #a9c76e; text-indent:-9999px; left:31px; top:7px; -moz-border-radius:15px; -webkit-border-radius:15px; width:19px; height:14px; }
/* === home page styles */
.feature {
padding-bottom:0; margin-bottom:10px; }
.feature table {
margin-top:20px; width:100%; }
.feature td {
vertical-align:bottom; }
.blurb {
color:#fafafa; font-size:120%; padding-right:30px; padding-bottom:30px; }
.blurb strong {
font-size:150%; display:block; margin-bottom:10px; }
.blurb p {
margin-bottom:10px; }
.randomTests {
float:right; padding:15px 15px 30px; width:238px; background:#212c36; color:#ebebeb; -moz-border-radius:6px 6px 0 0; -webkit-border-top-right-radius:6px; -webkit-border-top-left-radius:6px; }
.randomTests h3 {
background:url(../images/label_smile.png) no-repeat; padding:84px 0 0 28px; margin:-74px 0 0 -28px; }
.randomTests .counter {
white-space:nowrap; }
.randomTests .counter span {
display:inline-block; text-align:center; margin:0 1px 0 0; width:36px; height:44px; line-height:37px; font-size:33px; background:url(../images/counter.png) #e7e8e9; font-weight:bold; color:#242f39; }
.randomTests p {
clear:left; padding-top:10px; }
.recentTests {
background:#fafaf7; padding:5px 10px; margin:15px 0 5px; overflow:hidden; position:relative; }
.testScroller {
white-space:nowrap; width:3000px; }
.blur {
background:url(../images/fade.png) right top repeat-y; position:absolute; right:0; top:0; height:111px; width:80px; }
.recentTests .thumb {
float:left; width:66px; height:66px; margin:5px 15px 5px 0; }
.recentTests a {
display:inline-block; width:60px; height:60px; }
.recentTests a:hover {
border-color:#85bbd1 !important; }
.recentTests img {
width:60px; height:60px; }
/* === info section */
.infoList, .karmaExplain {
clear:left; float:left; padding-bottom:10px; margin-top:20px; }
.wSmall .infoList, .wSmall .karmaExplain { width:443px; }
.wMedium .infoList, .wMedium .karmaExplain { width:692px; }
.wLarge .infoList, .wLarge .karmaExplain { width:938px }
.infoBlock {
float:left; margin:0 30px 30px 0; position:relative; }
.infoBlock super { color:#f00; font-size:11px; vertical-align:top; }
.wSmall .infoBlock { width:191px; }
.wMedium .infoBlock { width:316px; }
.wLarge .infoBlock { width:204px }
.infoBlock h3 { float:left; }
.infoBlock p { clear:left; }
.infoBlock h3, .recentTests h3 {
background-repeat:no-repeat; background-position:0 center; margin-bottom:5px; }
.infoBlock img {
float:left; margin:2px 5px 2px 0; }
.sideBar {
float:right; position:relative; width:268px; margin:10px 0 40px; }
.blog {
background:#fafaf7; padding:15px; top:10px; margin-bottom:10px; }
.blog h3 {
background:url(../images/label_monkey.png) no-repeat; padding:18px 0 0 40px; margin:-26px 0 7px -26px; }
.blog li {
list-style:disc outside; margin:5px 0 0 15px; color:#eaeae3; }
.video_container {
width:490px;
height:400px;
margin-top:9px;
border:10px solid #eee;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
#clickBox.single
{
z-index:60;
}
#clickBox strong
{
display:block;
padding-bottom:5px;
margin-bottom:5px;
white-space:nowrap;
border-bottom:2px solid #fff;
}
#clickBox ul
{
list-style-position:inside;
}
.removable
{
background:url(../images/keywordUnlink.png) right center no-repeat #eaeae3;
color:#666;
-webkit-border-radius:4px;
-moz-border-radius:4px;
padding:1px 12px 1px 3px;
cursor:pointer;
}
.thick
{
color:#f5f5f5;
background:#f5f5f5;
height:3px;
border:1px solid #f5f5f5;
}
/* =reset */
body, h1, h2, h3, p, ul, form, fieldset {
margin:0;
padding:0;
border:0;
}
#flash_holder {
font-size:.9em; font-weight:bold; color:#fff; position:absolute; width:100%; z-index:2000; }
#flash_holder .wrapper {
text-align:center !important; }
#flash_holder p {
padding:10px 0; }
#flash_holder.flash_error { background:#c24547; background:rgba(194, 69, 71, .7); }
#flash_holder.flash_warning { background:#c24547; background:rgba(194, 69, 71, .7); }
#flash_holder.flash_notice { background:#9dba6b; background:rgba(157, 186, 107, .7); }
.login_tab
{
position:absolute;
top:-30px;
right:0;
background:#212c36;
-moz-border-radius:0 0 5px 5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
padding:6px 8px 7px;
text-align:right;
font-size:.8em;
color:#afb6bb;
}
.login_tab a{ color:#448eb2; }
.login_tab a:hover
{
background:none;
color:#51b6e5;
padding:0;
margin:0;
}
.tipRight {
max-width:200px;
}
.floats input, .floats label, .floats .jTip
{
float:left;
line-height:.9em !important;
display:block !important;
height:1.1em !important;
overflow:visible;
margin:0 5px 0 0 !important;
}
.floats input
{
clear:left;
}
.validation-summary-errors {
clear:both; }
.validation-summary-errors li, .alerts li {
padding:0 0 2px 1em; background:url(../images/error.png) 0 1px no-repeat; list-style:none; color:#d55858; }
.alerts li {
background:url(../images/alert.png) 0 3px no-repeat; color:#62bde7; }
.disabled .type
{
background:#e8a6a6 !important;
color:#7d4242 !important;
padding-left:7px !important;
}
#test_area { position:absolute; margin:0 auto; border:1px solid #ccc; cursor:pointer; border: 10px solid #444;
}
#clone { display:none;position:absolute }
table.admin, table.breakdown
{
border-collapse:collapse;
width:100%;
margin-bottom:30px;
}
.admin td, .breakdown td
{
border-bottom:1px solid #ddd;
padding:5px 0 8px;
width:30%;
}
.admin td:last-child
{
width:70% !important;
text-align:right;
font-weight:bold;
}
.breakdown td, .breakdown th
{
text-align:right;
width:15%;
}
.breakdown td:first-child, .breakdown th:first-child
{
width:25%;
text-align:left;
}
#reload
{
display:none;
}
.hint
{
background:#fbf8db;
-webkit-border-radius:6px;
-moz-border-radius:6px;
padding:8px 10px 10px;
position:absolute;
width:160px;
height:60px;
top:0;
right:0;
color:#b5ac70; font-size:12px; border:3px solid #f5f1d3;
}
.hint strong {
display:block; margin-bottom:5px; }
.jqifade{
position: absolute;
background-color: #aaaaaa;
}
div.jqi{
width: 400px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
position: absolute;
background-color: #ffffff;
font-size: 11px;
text-align: left;
border: solid 1px #eeeeee;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
padding: 7px;
}
div.jqi .jqicontainer{
font-weight: bold;
}
div.jqi .jqiclose{
position: absolute;
top: 4px; right: -2px;
width: 18px;
cursor: default;
color: #bbbbbb;
font-weight: bold;
}
div.jqi .jqimessage{
padding: 10px;
line-height: 20px;
color: #444444;
}
div.jqi .jqibuttons{
text-align: right;
padding: 5px 0 5px 0;
border: solid 1px #eeeeee;
background-color: #f4f4f4;
}
div.jqi button{
padding: 3px 10px;
margin: 0 10px;
background-color: #2F6073;
border: solid 1px #f4f4f4;
color: #ffffff;
font-weight: bold;
font-size: 12px;
}
div.jqi button:hover{
background-color: #728A8C;
}
div.jqi button.jqidefaultbutton{
background-color: #BF5E26;
}
.jqiwarning .jqi .jqibuttons{
background-color: #BF5E26;
}