/* www.type-smart.com */
html, body, div, table, img { margin: 0; padding: 0; border: 0; }
/* ~~~~~~~~~~~ Fonts ~~~~~~~~~~~~ */
html, body, div, table { font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif; }
/* In Win IE if a base size has been set, then it won't allow scaling,
* whereas all the other browsers do, including Mac IE. */
html > body, td { font-size: 8pt; }
* html body { font-size: 70%; }
/* The only way to allow scaling in Win IE is to use percentages. */
h1 { font-size: 170%; }
h2 { font-size: 140%; }
h3 { font-size: 120%; }
h4 { font-size: 100%; }
h5 { font-size: 100%; }
/* Exclude Mac IE \*/
a.button { font-size: 130%; }
#logo,
#feature { font-size: 120%; }
#company,
#navigation,
.copyright,
#copyright { font-size: 90%; }
* html em { font-size: 95%; }
input, select { font-size: 8pt; }
* html select { font-size: 90%; }
/* */
h1, h2, h3, h4,
em, .atLast { color: #006; font-family: Georgia, "Times New Roman", Times, serif; }
#company { color: #006; text-decoration: none; }
#logo,
#feature { color: #c00; font-weight: bold; }
#text a { font-weight: bold; }
a { color: #c30; text-decoration: none; }
a:visited { color: #900; }
a:hover { background-color: #f90; }
a#logo:hover,
a#feature:hover,
a.up:hover,
a.up:focus { background-color: transparent; }
#company a { color: #006; text-decoration: none; }
#tabs a { color: #fff; text-decoration: none; font-weight: bold; }
#tabs a:hover,
#tabs a:focus,
#tabs td:hover { background-color: #f66; }
#tabs td.active { background-color: #c03; }
.menu a { border-left: 10px solid #f93; color: #006; text-decoration: none; }
.menu a:hover,
.menu a:focus { border-color: #f63; }
.menu a.active { border-color: #c03; background-color: #f93; }
a#download-demo { background: #fa3 url(../images/btn-download.gif) no-repeat; border: 0; }
a#download-demo:hover,
a#download-demo:focus,
a#download-demo.active
{ background: #fa3 url(../images/btn-download-focus.gif) no-repeat; }
a.button { background: #fa3 url(../images/button.gif) no-repeat; border: 0; font-weight: bold; }
a.button:hover,
a.button:focus { color: #f30; }
.news h4 { color: #fff; background-color: #006; }
.item a { color: #f30; text-decoration: none; }
.orange { color: #c00; }
.incorrect { color: #f00000; }
.warning { color: #f00000; background-color: #fc9; font-weight: bold; }
.warning h3 { color: #f00000; }
/* ergonomics.html */
#ergonomic-warning { color: #000; font-weight: normal; }
dl#tips dt { color: #006; }
#ergonomics #compare label { font-weight: bold; text-align: right; }
/* explore.html */
#explore dt { color: #009; } /* Module # */
#explore dd { color: #000; } /* Description */
/* comparison.html */
.legal { color: #800; }
.legal span { color: #ccc; background-color: #ccc; }
.highlight { background-color: #eef; }
dt { font-weight: bold; }
.light dt,
.note dt,
.quote dt,
dt span { font-weight: normal; }
/* dark class is always applied to lists */
.dark { font-weight: bold; }
.light { font-weight: normal; }
/* allow for normal font under strong headers in lists */
.dark span,
ol.dark p,
ul.dark p,
.dark ul, /* sub-lists */
.dark ol { font-weight: normal; }
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ *\
Head
\* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#head { margin: 0; padding: 0; width: 100%; height: 80px; }
#company { position: absolute; top: 0; left: 150px; margin: 0; height: 62px; }
#logo { position: absolute; top: 0; left: 520px; width: 240px; height: 75px; }
#feature { position: absolute; top: 68px; left: 530px; width: 280px; height: 140px; }
.up { z-index: 10; } /* overlaps sidebar */
#tabs { z-index: 10; }
#company { z-index: 10; } /* overlaps tabs */
#logo { z-index: 20; } /* overlaps tabs */
#feature { z-index: 50; } /* overlaps logo */
#company h2 { margin: 0; padding: .5em 0 .25em 0; }
#company p { margin: 0; padding: 0; }
#head > #logo { background: transparent url(../images/logo.png) no-repeat; }
* html #logo { background: transparent url(../images/logo.gif) no-repeat; }
#head > #feature { background: transparent url(../images/enjoy-typeSmart.png) no-repeat; }
* html #feature { background: transparent url(../images/enjoy-typeSmart.gif) no-repeat; }
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ *\
Text Layer
\* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* The extra div is here just for Mac IE 5.0 which won't show the borders otherwise */
* html #contents { position: absolute; left: 0; top: 80px; right: 750px; margin: 0; padding: 0; }
/* Causes problems for Win IE though \*/
* html #contents { position: relative; top: 0; }
/* */
#borders { width: 620px; margin: 0; padding: 0;/*
border-top: 80px solid #fff; allow for page header */
border-left: 130px solid #fa3; /* colour side bar */
border-bottom: 1px solid #ccf; }
#page { border: 1px solid #ccf; border-width: 0 1px; padding: 1em 0 0 0; }
.text { padding: 0 2em; }
/* allow space under the floating feature */
#under-feature { float: right; width: 200px; height: 100px; margin: 0 0 1em 1em; }
.note { clear: right; float: right; width: 150px; margin-left: 2em; margin-right: -1em; padding: 0 1em; border-left: 1px solid #ccf; }
.text > .note { margin-right: -2em; }
.wide { width: 200px; } /* wide notes */
#foot { clear: both; border-top: 1px solid #ccf; margin-top: 3em; padding: 1px 2em; text-align: center; }
.copyright { padding-top: .5em; }
#copyright { padding-top: .5em; }
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ *\
Notes Styles
\* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.news { margin: 2em 0; }
.news h4 { padding: .25em .5em; margin: 1em 0 .5em 0; }
* html .news h4 { padding: .1em .5em; }
.item { border-bottom: 1px solid #ccf; margin-bottom: 1em; padding-bottom: .5em; }
#reward { padding-bottom: 3em; }
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ *\
Menu Layer
\* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#navigation { margin: 0; padding: 0; width: 100%; height: 100%; }
#tabs { position: absolute; top: 62px; left: 0; width: 100%; height: 18px; }
#tabs td { border-right: 1px solid #ccf; background-color: #006; }
#tabs a { display: block; width: 100px; height: 16px; line-height: 16px; text-align: center; }
#tabs span a { width: 108px; padding-left: 20px; text-align: left; }
#sidebar { position: absolute; top: 0; left: 0; width: 130px; padding-top: 80px;
border-right: 1px solid #ccf; background: #fa3 url(../images/gradient.jpg) repeat-x; }
.menu { padding: 0; margin: 0; border-bottom: 1px solid #c96; }
.menu p { width: 130px; margin: 0; padding: 0; }
.menu a { display: block; height: 20px; line-height: 20px; padding: 0 0 0 1em; }
a#download-demo { display: block; width: 120px; height: 30px; margin: 1em auto; }
a.button { display: block; width: 110px; height: 30px; line-height: 30px; margin: 5px; text-align: center; text-indent: -20px; }
#available { margin: 0; padding: 1em; text-align: center; }
#kharisma { padding: 1em; border-top: 1px solid #c96; text-align: center; }
#topics { position: fixed; top: 200px; left: 750px; padding: 2em; }
* html #topics { position: absolute; }
/* Back to Top
On long pages there is a 'back-to-top' arrow going down the side of the sidebar
#arrow is for modern browsers that recognise position:fixed;
and sits at the bottom of the html code
Only one is needed
.ie is for Internet explorer that needs position:absolute;
There is one next to every major heading down the page
*/
.up { position: absolute; left: 122px; display: block; width: 16px; height: 20px;
background: transparent url(../images/back-to-top.gif) no-repeat; }
/* \*/
div > .up { position: fixed; bottom: 30px; }
div > .ie { display: none; }
/* */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ *\
Font Styles
\* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
h1, h2, h3, h4 { margin: 1em 0 .25em 0; }
h5 { margin: 2em 0 .25em 0; }
#foot h2 { margin: .25em 0; }
#foot p { margin: 0; }
table h4 { margin: 0 0 .25em 0; }
caption, form caption { margin: 0; padding: .5em 0 .2em 0; text-align: left; }
.hide { display: none; }
.indent { padding-left: 2em; }
.centred { text-align: center; }
img.centred { display: block; margin: 1em auto; }
img.nav { padding: 0 1em; }
.clear { clear: both; }
.float-l { clear: left; float: left; padding-right: 1em; }
.float-r { clear: right; float: right; padding-left: 1em; }
.example { margin: 1em; }
#ergonomic-warning { margin: 1em -1em; padding: 1em; padding-top: 1px; }
.box { border: 1px solid #ccf; border-width: 1px 0; background-color: #dde; }
.box { margin-top: 1em; padding: 1em; }
.note .box { margin: 1em -1em; }
table.box, table .box, form .box { margin: 0; padding: .5em; }
.narrow { width: 350px; padding: 1em; }
.middle { width: 380px; padding: 1em; }
#disclaimer { width: 360px; padding: 0 1em 1em 1em; }
* html #disclaimer { width: 340px; }
.atLast { text-align: center; }
.note .atLast { text-indent: 1em; line-height: 1.5em; background: url(../images/mini-quotes-left.gif) top left no-repeat; }
.note .atLast em { padding-right: 1.5em; font-style: normal; background: url(../images/mini-quotes-right.gif) top right no-repeat; }
.address { padding-left: 4em; }
/* ~~~~~~~~~~~ Explore views ~~~~~~~~~~~ */
#view img.nav { padding-bottom: 1em; }
#view p.nav { padding-left: 70px; }
#view .note strong { padding: 0 1em; }
/* ~~~~~~~~~~~ buy-typing-tutor.php ~~~~~~~~~~~ */
#buy-typeSmart .prices td { height: 20px; }
#buy-typeSmart #calculate td { height: 20px; }
#buy-typeSmart .option { margin: 0; padding-bottom: .5em; border-bottom: 1px solid #ccf; }
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ *\
Lists
\* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
dl#etext_method dt { margin-top: 2em; }
li { margin: 1em 0; }
.list li { margin: .25em 0; }
.note ol, .note ul { padding-left: 1em; margin-left: 1em; }
.note li { margin: 1em 0; }
.open li { margin-top: .5em; margin-bottom: .5em; }
.tick li { list-style-image: url(../images/tick.gif); }
.cross li { list-style-image: url(../images/cross.gif); }
.sub li { margin-left: 2em; }
.cross .sub { padding: 0; padding-left: 20px; text-indent: -20px; }
.cross .sub label { display: block; float: left; background-color: #0099FF }
ol.steps { margin: 1em 0; padding: 0; }
.note ol.steps { padding-bottom: 10px; border-bottom: 1px solid #ccf; }
ol.steps li { margin: .5em 0 .5em 2em; padding: 0; }
ol.steps .tick { list-style-image: url(../images/tick.gif); margin-left: 3em; text-indent: -1em; }
ol li.tick { list-style-image: url(../images/tick.gif); margin-left: 1em; text-indent: -1em; }
#course ol { margin: 1em 0; }
#course li { margin: 1em 0; }
.abc { list-style-type: lower-alpha; }
dt { margin: .5em 0 0 0; }
dd { margin: .5em 0 .5em 2em; }
dd p { margin: .5em 0; }
.quote dt { padding-left: 4em; padding-top: 1.5em; background: url(../images/quotes-left.gif) no-repeat; }
.quote dt em { padding-right: 4em; padding-bottom: 1em; background: url(../images/quotes-right.gif) bottom right no-repeat; }
.quote dd { padding-left: 4em; }
/* mini-quotes are always in the notes column */
.note dt { padding-left: 1.5em; padding-top: .25em; background: url(../images/mini-quotes-left.gif) no-repeat; }
.note dt em { padding-right: 1.5em; background: url(../images/mini-quotes-right.gif) bottom right no-repeat; }
.note dd { padding-left: 1.5em; }
table dt { margin: 0; }
#rewards dt { margin-top: 1em; }
#ergonomics #compare label { float: left; width: 7em; padding-right: 1em; text-align: right; }
#explore table { clear: both; }
#explore dl { margin: 0; padding: 0 0 1em 0; }
#explore dt { margin: 0; padding: 0; }
#explore dd { margin: .5em 0; padding: 0; }
#submit-record blockquote { width: 250px; }
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ *\
Tables
\* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.best { background-color: #009; margin: 0; padding: 0 0 0 .3em; color: #fff; }
.score { background-color: #f96; margin: 0; padding: 0 0 0 .3em; }
.m-2 { width: 20px; }
.m-6 { width: 60px; }
.m-12 { width: 120px; }
.m-345 { width: 345px; }
.m-200 { width: 200px; }
.m-195 { width: 195px; }
.m-155 { width: 155px; }
.m-150 { width: 150px; }
.m-125 { width: 125px; }
.m-115 { width: 115px; }
.m-105 { width: 105px; }
/* percentages */
.p-75 { width: 150px; }
.p-70 { width: 140px; }
.p-56 { width: 112px; }
.p-30 { width: 60px; }
.p-23 { width: 46px; }
.p-21 { width: 42px; }
.p-19 { width: 38px; }
.p-6 { width: 12px; }
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ *\
Forms
\* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
form { margin: 0; margin-top: 1em; padding: 0; }
form p { margin: .5em 0; }
fieldset { margin: .5em 0; padding: 10px; background-color: #ddf; }
#submit { width: 100px; }
#survey h3 { margin: 2em 0 1em 0; }
* html #survey h3 { margin: 1em 0 .5em 0; }
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ *\
Archaic
\* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.ref { margin-top: 2em; }
.ref label { position: absolute; left: 155px; width: 40px; margin: 0; padding: 0; }
.ref dt { margin-left: 40px; font-weight: bold; }
.ref dd { margin-left: 40px; }