body { background: #f4f4f4; margin: 0px; padding: 0px; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; color: #666; }
header { width: 100%; background: -webkit-linear-gradient(top, #f7f7f7 0%,#f7f7f7 80%,#e4e4e4 100%); background: -moz-linear-gradient(top, #f7f7f7 0%,#f7f7f7 80%,#e4e4e4 100%); background: linear-gradient(top, #f7f7f7 0%,#f7f7f7 80%,#e4e4e4 100%); height: 200px; }
h1, h2 { text-transform: capitalize; padding: 0px; margin: 0px 0px 10px 0px; font-weight: bold; font-variant: small-caps; }
h1 { font-size: 18px; }
h2 { font-size: 14px; }
h3 { font-size: 10px; font-weight: normal; margin: 0px; padding: 0px; }

a { color: #666; }
a:hover { background: #ddd; }

article { float: left; width: inherit; margin: 20px 0px 0px 0px; min-height: 500px; }

.columnLeft { width: 280px; float: left; min-height: 100px; margin-left: 20px; }
.columnRight { width: 600px; float: left; min-height: 100px; }

p { font-size: 12px; line-height: 200%; }
#note { line-height: 100%; font-size: 10px; width: 600px; height: 50px; }

hgroup { height: 115px; margin: 20px 0px 0px 0px; }

.fixWidth { width: 960px; }

#story { font-size: 12px; max-height: 360px; overflow: scroll; overflow-x: hidden; line-height: 200%; padding-right: 40px; }

#story::-webkit-scrollbar { width: 8px; }
#story::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.3); -webkit-border-radius: 8px; border-radius: 8px; }
#story::-webkit-scrollbar-thumb { -webkit-border-radius: 10px; border-radius: 8px; background: rgba(150,150,150,0.8); -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.5); }
#story::-webkit-scrollbar-thumb:window-inactive { background: rgba(200,200,200,0.4); }

ul { list-style: none; padding: 0px; margin: 0px; text-indent: 0px; line-height: 100%; }
ul li { font-size: 10px; height: 16px; line-height: 16px; background: rgba(0,0,0,.1); list-style: none; padding: 0px 3px; margin: 0px 3px 0px 0px; text-indent: 0px; display: inline-block; cursor: pointer; -webkit-transition-duration: 0.5s; }
ul li:hover { background: rgba(0,0,0,.2); }

#story span { font-size: 12px; line-height: 200%; }

#synonyms div { width: 250px; min-height: 40px; overflow: hidden; padding: 10px 0px 10px 10px; margin: 0px; }
#noun { color: #720; background: #E1DCCE; }
#verb { color: #690; background: #C6F2B7; }
#adjective { color: #77D; background: #F4DEFF; }
#adverb { color: #D25; background: #F4CCD2; }

.syn { color: #00C; }
.ant { color: #C00; }
.notSynOrAnt { color: #333; }

#key { margin-top: 146px; }
#sideMessage { padding: 0px !important; font-style: italic; }

#story span { display: none; }

.uppercase { text-transform: capitalize; }

u { text-decoration: none; background: rgba(200,180,0,.2); -webkit-transition-duration: 0.5s; cursor: pointer; }
u.wasReplaced { background: rgba(100,100,200,.2); }
u:hover { background: rgba(200,180,0,.4); }

#instruction { margin: 0px 0px -10px 0px !important; padding: 0px !important; font-size: 14px; font-weight: normal; font-style: italic; float: left; width: 240px; }

footer { width: 400px; float: left; font-size: 10px; line-height: 200%; margin: 20px 0px 0px 300px; }

ol { font-size: 12px; line-height: 200%; }