/* BASIC ELEMENTS ***********************************************************************************/
html {min-height:100%; overflow-y:scroll}
body {height:100%; margin:0}
body {font-family:Arial, Helvetica, sans-serif; font-size:62.5%; line-height:1.3}
p {margin-top:0; margin-bottom:1em; font-size:1.6em}
h1 {margin-top:0; margin-bottom:1em; font-size:2.4em}
ul {padding-left:1.6em}
li {margin-bottom:0.5em; font-size:1.6em}
a {color:#258b95}
a:hover {text-decoration:none}
audio {margin-bottom:2em}

/* COMMON FORMATS ******************************************************************************/
.centre {text-align:center}
.right {text-align:right}
.indent {margin-left:20px}
.close {margin-bottom:0}
.dialogue {color:#003366}

/* TEMPLATE ******************************************************************************/
.width {padding:0 10%}

#banner {height:90px; background-color:#4992ab; color:white; padding-top:1em; padding-bottom:1em; overflow:hidden}
#bannerimage {float:right}
#title1 {font-size:2.4em; margin-bottom:0}
#title2 {margin-bottom:0}

div.stripe {height:4em; line-height:4em; background-color:#f9ffc2; border-top:1px black solid; border-bottom:1px black solid}
div.stripe a {display:inline-block; padding:0 0.5em; color:black; text-decoration:none}
div.stripe a:hover {background-color:#4992ab; color:white}
ul.horizontal {margin:0; padding:0; white-space:nowrap}
ul.horizontal li {list-style-type:none; display:inline}

#middle {width:80%; padding-top:3em; padding-bottom:2em; background-color:#ffffff; overflow:hidden}
#content {float:left; width:65%}

#sidebar {float:right; width:20%; padding-top:1.5em}
.unitlink {margin-bottom:0.3em; background-color:#4992ab; font-size:1.6em; border-radius:0.5em}
.unitlink a {display:block; border:1px grey solid; padding:0.2em; color:#ffffff; text-decoration:none; border-radius:0.5em}
.unitlink a:hover {border-color:black}
#sidebar ul {margin:0 0 0 1em; padding:0; list-style-type:none}
#sidebar li {margin:0.2em 0; background-color:#f9ffc2; cursor:pointer; list-style-type:none; font-size:1.6em; border-radius:0.5em}
#sidebar li a {display:block; border:1px black solid; padding:0.2em 0 0.2em 0.2em; color:#000000; text-decoration:none; border-radius:0.5em}
#sidebar li a:hover {background-color:#fafbf1}

#bottomstripe {margin-top:2em; text-align:center}
#bottomstripe a {font-size:1.6em}
#bottom {padding-top:2em; padding-bottom:3em; font-size:1.2em}

/* CAPSULES ***********************************************************************************/
.beige {background-color:#f9ffc2}

.capspara {display:table; border:2px black solid; padding:2em 2em 0 2em; margin:2em 0}
.capspara ul {margin: 0 0 0 2em; padding:0}
.capspara ol {margin: 0 0 0 2em; padding:0}

table.cap2 {margin:1em 0 1em 0; font-size:1.6em; border:2px black solid}
table.cap2 td {vertical-align:top; padding-left:1em}
.col2 {width:5em}
.col3 {width:6em}
.tdcol2 {text-align:right}
.tdcol3 {text-align:right; padding-right:1em}
.toppadding {padding-top:1em}
.bottompadding {padding-bottom:1em}

table.cap4 {font-size:1.6em; margin-bottom:2em}
table.cap4 td {vertical-align:top; padding-right:2em}

/* DICTIONARY TABLES ***********************************************************************************/
table.dict {margin-bottom:2em}
table.dict td{vertical-align:top; padding-right:1em}
table.dict p{margin-bottom:0}
table.dict span{ color: #003366; font-weight: bold}

/* 'SHOW ANSWER' EXERCISES ***********************************************************************************/
.showhide {margin:0 0 1em 0}
.showques {margin-top:2em; font-weight:bold}
.textinput {margin-top:0.5em; background-color:#e0e0e0}
.showhideanswer{margin:0.5em 0; font-size:1.4em}
.answerhide {display:none; margin-top:0em}
.answershow {display:block}

/* MEDIA QUERIES ****************************************************************************/
@media print {
html {padding:0}
#banner {display:none}
#topstripe {display:none}
#sidebar {display:none}
#content {width:100%; float:none}
#bottomstripe {display:none}
#bottom {border-top:1px black solid}
}