@charset "utf-8";
/* CSS Document */


html, body {
	font-family: Arial, Helvetica, sans-serif;
	line-height: 1.5em;
	font-size: 14px;
	background-color: #fff;
	margin-top: 0px
}
body {
	text-align: center;
	font-size: 14px;
}
p, #exercise ol, span.order_number {
	color: #666;
	font-size: 1.2em
}
h1 {
	margin: 0.6em 0 0 0;
	font-size: 1.4em;
}
h2 {
	color: #6565CB;
	font-weight: normal;
	font-size: 2em;
	font-family: Verdana, Geneva, sans-serif;
	margin-top: 0px
}
h3 {
	font-size: 1.6em
}
h4 {
	font-size: 1.2em;
	margin-bottom: 0px;
padding:bottom:0px;
	line-height: 0.6em
}
.fontserif {
	font-family: Georgia, "Times New Roman", Times, serif;
}
.basic {
	color: #cc0000
}
.intermediate {
	color: #ff9900;
}
ul {
	margin: 0px;
	padding: 0px
}
/*switch off*/ #book_logo, #bottom {
	display: none;
	float: right
}
/* layout*/
.center {
	text-align: center
}
#homelevels {
	width: 558px;
	list-style-type: none;
	clear: both;
	margin-left: auto;
	margin-right: auto;
	padding-top: 20px;
}
#homelevels li{
	display: block;
	float: left;
	height: 170px;
	margin-right: 10px
}
#homelevels a {
	display: block;
	margin-top: 30px;
	text-decoration: none;
	clear: both;
}
#homelevels a:hover {
	filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
	filter: alpha(opacity=70);
	opacity: .7;
}
#container {
	width: 100%;
	max-width: 840px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	position: relative;
}
#header {
	width: 100%;
	overflow: hidden;
}
#oup_logo {
	float: left;
	margin-right: 0px;
}
#oup_logo img {
	margin: 10px 0px 11px 0px
}
#banner {
	text-align: right;
	float: right;
	display: none;
}
#breadcrumb {
	padding: 4px 4px 4px 0px;
	clear: both;
	color: #666;
	font-size: 0.8em;
	margin-top: 0px;
}
#breadcrumb a {
	color: #666;
	font-weight: normal;
	text-decoration: none
}
#breadcrumb a:hover {
	text-decoration: underline;
}
#navigation {
	border-radius: 8px;
	font-family: Verdana, Geneva, sans-serif;
	overflow: hidden;
	text-align: center;
	padding:0.4em 1em 0.4em 1.2em;
}
#navigation ul {
	width:98%;
	margin-left: auto;
	margin-right: auto;
	list-style: none;
}
#navigation li {
	float: left;
	margin: 0 1em 0 0;
	background-color: #fff;
	border: 2px solid #F08200;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-bottomright: 10px;
	border-top-left-radius: 10px;
	border-bottom-right-radius: 10px;
}
#navigation li a {
	font-size: 1em;
	font-weight: bold;
	text-decoration: none;
	display: block;
	padding: 0.2em 1.2em
}
#navigation li a:hover {
	filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
	filter: alpha(opacity=70);
	opacity: .7;
}
#middle_matter {
	overflow: hidden;
	background-image: url(../champions/homepage_bg.jpg);
	background-repeat: no-repeat;
}
#book_image {
	display: none;
	margin-bottom: 50px;
	margin-top: 30px;
	text-align: center
}
#content {
	padding-bottom: 20px;
	text-align: left;
}
#content.home_page {
	text-align: center;
	width: 100%;
	margin-top: 0px;
	padding-bottom: 260px
}
#exercise {
	padding: 1em;
}
#bottom {
	clear: both;
}
#home_bottom {
}
/*defines style for the centre nav on sections*/

#children, .wallpaper {
	margin: 10px 0px 0px 20px;
	padding: 0px;
	line-height: 1.8em;
	font-size: 1.2em;
	font-weight: bold;
}
#children a, .wallpaper a {
	text-decoration: none
}
#children a:hover {
	text-decoration: underline
}
#menus {
	display: none;
	background-color: #fff;
	margin-bottom: 10px
}
/*misc*/
img {
	border: 0px
}
img+span.xanswer {
	clear: both;
}
/*v2 exercise styles*/

form ol {
	line-height: 2.4em
}
#form1_feedback, #form2_feedback {
	display: none;
	background-color: #FFC;
	padding: 4px;
	width: 40%;
	-moz-box-shadow: 3px 3px 10px #666;
	-webkit-box-shadow: 3px 3px 3px #666;
	box-shadow: 3px 3px 10px #666;
	clear: both;
}
select {
	margin-right: 3px;
	font-size: 1em;
}
#form1_feedback_score, #form2_feedback_score {
	font-size: 1em;
	text-align: center
}
span.xanswer {
	display: none;
	font-weight: bold;
	background-color: #FF9;
}
.speaker {
	font-weight: bold;
	margin-right: 10px;
	width: 70px
}
.extra {
	width: 100px;
}
#showhide span {
	display: inline-block
}
audio {
	width: 100%;
	max-height: 40px;
}
#audioobject {
	background-image: url(images/top_bar_bg.jpg);
	background-repeat: repeat-x;
	background-position: bottom;
}
.controls {
	clear: both;
	padding-top: 20px;
}
form.relative {
	position: relative
}
input[type=radio] {
	display: block;
	width: 26px;
	height: 26px;
	float: left
}
.images input[type=radio] {
	display: block;
	width: 26px;
	height: 26px;
	margin-left: 4px;
}
input[type=button]:first-child {
	margin-left: 0.8em;
	margin-top: 0.8em;
}
/* Change the look'n'feel of labels (which are adjacent to radiobuttons).
  Add some margin, padding to label
*/
input[type=radio] + label {
	text-align: center;
	display: block;
	font-size: 1em;
	padding: 4px;
}
/*
 Change background color for label next to checked radio button
 to make it look like highlighted button
*/
input[type=radio]:checked + label {
	background-image: none;
	background-color: #FF9;
}
/*grid*/
#matchgrid {
	width: 100%;
	position: relative;
}
#form1_matchgroup1, #form1_matchgroup2 {
	width: 100%;
	overflow: hidden;
	clear: both
}
#form1_group2_1 {
	position: absolute;
	top: 36px
}
#form1_group2_2 {
	position: absolute;
	top: 36px;
	left: 200px
}
#form1_group2_3 {
	position: absolute;
	top: 36px;
	left: 400px
}
#form1_group2_4 {
	position: absolute;
	top: 36px;
	left: 600px
}
#form1_group2_5 {
	position: absolute;
	top: 252px;
}
#form1_group2_6 {
	position: absolute;
	top: 252px;
	left: 200px
}
#form1_group2_7 {
	position: absolute;
	top: 252px;
	left: 400px
}
#form1_group2_8 {
	position: absolute;
	top: 252px;
	left: 600px
}

#form1_matchgroup1 div {
	padding: 0px;
	position: relative;
	float: left;
	width: 180px;
	border: 1px solid #ccc;
	margin-bottom: 182px;
	margin-right: 18px
}
#form1_matchgroup2 div {
	padding-bottom: 0px;
	float: left;
	width: 180px;
	border: 1px solid #ccc;
}
#form1_matchgroup2 label {
	padding: 0px
}
.matchdone {
	background-color: #eee
}
#form1_matchgroup2 img.mark {
	float: left;
	position: relative;
	top: -60px
}
.a, .q {
	font-weight: bold;
	padding-right: 0.8em
}
/*Crossword styles*/
form.withimages ol {
	list-style-position: inside;
	width: 100%;
	overflow: hidden;
	margin: 0px 0px 20px 0px;
	padding: 0px
}
form.withimages li {
	width: 190px;
	float: left;
	border: 1px solid #eee;
	margin: 2px;
	padding: 0px 0px 0px 3px
}

.wordpool{margin-left:20px; word-spacing:3em}
/*ordering*/
ol.orderblock li{border:1px solid #ccc; padding:3px; margin:3px}
ol.orderblock{color:#F00; list-style:none; margin:0px; padding:0px; margin:1em 0 1em 2.2em}
ol.inline li, #form1 ul.ordertarget li{display:inline}
ol.inline li a, ul.ordertarget li a{color:#666; text-decoration:none}
ul.ordertarget{background-color:#eee; width:400px; padding:0; margin:0px; list-style-type:none}

ul.ordertarget li a{padding-left:4px}
.ordertarget .mark{background-color:#fff; display:block; float:left; border-bottom:2px solid #fff}

span.order_number{background-color:#fff; border:2px solid #fff; padding-right:6px}

.wallpaper
{
	float:right;
	text-align:center;
}


/*ol.picgrid {float:left; border:1px solid #eee; margin:2px; padding-left:3px}
form.left{width:48%; float:left}
ol.right{width:50%; float:right}*/
/*footer styles from main oup site*/

#addthis {
	clear: both;
	margin-top: 30px;
	text-align: right
}
#footer {
	margin-top: 15px;
	color: #fff;
	background-color: #002147;
	text-align: center;
	line-height: 2em;
	overflow: hidden;
	font-family: Arial, Helvetica, sans-serif;
	color: #fff;
}
#footer a {
	color: #fff;
	text-decoration: none
}
#footer a:hover {
	text-decoration: underline
}
#footer p, #footer ul {
	color: #ffffff;
	font-size:1em

}
#footer ul {
	list-style: none;
}
#footer li{
	display: inline;
	color: #ffffff;
}
.fl-left {
	float: left
}
.fl-right {
	float: right
}
#footerinner {
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

#footerinner ul{margin-top:1em}
#hometitle {
	margin-top: 70px;
	margin-right:36px;
}
#globe {
	margin-left: 10px
}
.exercise_buttons {
	margin-top: 20px
}
.exercise_gapfillbox {
	margin-right: 0px
}
.rubric {
	font-weight: bold; width:76%;
	margin-top:0.7em
}

.file_info{font-size:0.8em; color:#ccc}
.rubric.widthmore
{
	width:100%;
}
#level_nav {
	margin: 1.6em 0px 1.5em 1em;
	list-style-type: none;
	width:55%;
	float:left;
}
#level_nav a:hover {
	filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
	filter: alpha(opacity=70);
	opacity: .7;
}
#level_nav li a {
	display: block;
	background-repeat: no-repeat;
	padding-left: 60px;
	height: 60px;
	padding-top: 4px;
	font-size: 1.4em;
	font-weight: bold;
	text-decoration: none;
	background-position: left top;
}
#level_cover{margin:1.5em}
#acks{clear:both; font-size:0.6em; line-height:1em; border:1px solid #000; margin-top:2em; padding:0.4em}

.nav_text {
	color: #000;
	font-weight: normal;
	font-size: 0.6em
}
/*Postcard styles*/
.postcardtitle {
	text-align: left;
	color: #0078C1;
	font-size: 1em;
}
.choosepostcard {
	text-align: center;
	color: #000;
	width: 240px;
	margin-bottom: 4px
}
table {
	text-align: left;
	margin-left: 180px
}
td {
	text-align: left
}
td table td {
	width: 180px;
	border-radius: 10px;
	background-color: #d0e2f0;
	border: 6px solid #fff
}
td img {
	margin-left: 60px;
}
td a {
	display: none;
}
.postcardbutton a {
	display: block
}
td.postcardbutton {
	margin-left: 0px;
	text-align: left
}
table table {
	margin-left: 0px
}
h2 span {
	display: block;
	padding-top: 40px;
	padding-left: 140px
}
td[rowspan="8"] {
	display: none
}
input.postcardinput {
	margin-left: 0px
}
.choosepostcard label {
	display: block;
	clear: both;
	font-size: 0.8em
}
input.postcardinput[tabindex="1"], input.postcardinput[tabindex="2"] {
	margin-left: 180px
}