/*************/
/* CSS reset */
/*************/

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
	margin: 0;
	padding:0 ;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
	
}


fieldset,img {
	border: 0;
}
address,caption,cite,code,dfn,th,var {
	font-style: normal;
	font-weight: normal;
}
caption,th {
	text-align: left;
}
h1,h2,h3,h4,h5,h6 {
	font-size: 100%;
	font-weight: normal;
}
q:before,q:after {
	content: '';
}
abbr,acronym {
	border: 0;
}

/*********/
/* Oldal */
/*********/

html {
  width: 100%;
  height: 100%;
}

body {
  font-family: Tahoma, sans-serif;
  font-size: 12px;
  color: #404040;
  background-color: #5B0000;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

img {
  border: none;
}

h1 {
  font-size: 22px;
  font-weight: bold;
  /*font-variant: small-caps;*/
  margin: 20px 0px 5px 30px;
}

h2 {
font-family: Arial, sans-serif;
font-size: 16px;
  font-weight: bold;
  margin: 20px 0px 15px 30px;
}

.container {
  margin: 0 auto 0 auto;
  width: 870px;
  background: #e8e8e8;
  border-left: 4px solid #DF8600;
  border-right: 4px solid #DF8600;
  border-bottom: 4px solid #DF8600;
  padding-bottom: 10px;
  min-height: 90%;
}

.content {
  width: 850px;
  padding: 10px 10px 10px 10px;
}

.floatHelper {
  clear: both;
}

.footer {
}

.header {
  width: 870px;
  height: 132px;
  background: url("../images/fejlec_keskeny.jpg") no-repeat;
  margin: 0;
  padding: 0;
}

.headerHome {
  width: 870px;
  height: 240px;
  background: url("../images/fejlec.jpg") no-repeat;
  margin: 0;
  padding: 0;
}

p {
  margin: 0px 0px 5px 30px;
  font-family: Arial, Verdana;
  font-size: 1.2em;
  line-height: 18px;
}

a {
  color: #7d0000;
  text-decoration: none;
}

p.title a, p.title a:visited {
text-decoration: underline;
}

a:hover {
  color: #7d0000;
  text-decoration: underline;
}

a:visited {
  color: #7d0000;
}

a:active {
  color: #7d0000;
}

a.button {
  border: none;
  padding: 4px 10px 4px 10px;
  margin: 10px 0px;
  color: #7d0000;
  text-decoration: none;
  background-color: none;
}

a.button:visited {
}

a.button:hover {
  border: solid 1px #7d0000;
  color: white;
  padding: 3px 9px 3px 9px;
  background-color: #DF8600;;
  text-decoration: none;
}

a.button:active {
}

.chineseText {
  font-weight: normal;
}

.sourceCode {
  font-family: monospace;
  white-space: pre-wrap;
}

q {
  font-style: italic;
}

button {
  padding-left: 0;
  padding-right: 0;
}

a, a:hover, a:active, a:focus { 
	outline: none; 
}

*::-moz-focus-inner { 
	border: none; 
}

/**********/
/* Fejléc */
/**********/

.userHeader {
  background: white;
  padding: 2px 5px 2px 5px;
  vertical-align: middle;
}


/* Bejelentkező űrlap */

.userHeader form.loginForm {
  margin: 0;
  padding: 0;
  float: right;
}

.userHeader form.loginForm input {
  margin: 0;
  border: solid 1px black;
  background-color: white;
  font-size: 12px;
  width: 100px;
}

.userHeader form.loginForm label {
  margin: 0px 3px 0px 10px;
  font-size: 12px;
  color: black;
  display: inline;
  float: none;
  clear: none;
}

.userHeader form.loginForm button {
  margin: 0;
  border: none;
  background-color: #7D0000;
  color: white;
  font-size: 12px;
  width: 80px;
}

.loginError {
  margin: 3px 3px 3px 3px;
  padding: 3px;
  float: right;
  clear: right;
  font-size: 12px;
  color: red;
  background-color: white;
  border: solid 2px red;
}

/* Bejelentkezett felhasználó menüje */

ul.user {
}

ul.user li {
  background: white;
  display: block;
  float: right;
  padding: 2px 10px 2px 10px;
  font-weight: bold;
}

ul.user li a {
  color: #7d0000;
  text-decoration: none;
}

ul.user li a:hover {
  text-decoration: underline;
}

ul.user li a:visited {
}

ul.user li a:active {
}


ul.userMenu {
  background: white;
}

ul.userMenu li {
  background: white;
  display: block;
  float: left;
  padding: 2px 10px 2px 10px;
}

ul.userMenu li a {
  font-weight: bold;
  color: #7d0000;
  text-decoration: none;
}

ul.userMenu li a:hover {
  text-decoration: underline;
}

ul.userMenu li a:visited {
}

ul.userMenu li a:active {
}




/************************/
/* Felső legördülő menü */
/************************/

#menu {
  background-color: #7D0000;
	list-style: none;
	font-weight: bold;
	margin-bottom: 10px;
	/* Clear floats */
	float: left;
	width: 100%;
	position: relative;
	z-index: 300;
}

#menu li { 
	float: left;
	/* margin-right: 10px; */
	position: relative;
}

#menu li.alignRight {
  float: right;
}

#menu li a {
  display: block;
  text-align: center;
  margin: 2px;
  padding: 2px 10px 2px 10px;
  color: white;
  font-variant: small-caps;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
}

#menu li a:visited {
}

#menu li a:hover {
  color: #7D0000; 
  background-color: white;
}
#menu li a:active {
}

/*--- DROPDOWN ---*/
#menu ul {
	background: #ffddaa; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
	/* background: rgba(255,255,255,0); */ /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
	list-style: none;
	position: absolute;
	left: -9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
	border: solid 1px #7d0000;
	border-top: none;
}

#menu ul li {
	padding: 0px;
	float: none;
}

#menu ul a {
	white-space: nowrap; /* Stop text wrapping and creating multi-line dropdown items */
	font-size: 12px;
	font-variant: normal;
	text-align: left;
}

#menu ul li.selected a {
  color: yellow;
}

#menu li:hover ul { /* Display the dropdown on hover */
	left: 0; /* Bring back on-screen when needed */
}

#menu li:hover a { /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
	background-color: white;
	color: #7d0000;
	text-decoration: none;
}

#menu li:hover ul a { /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
	text-decoration: none;
	background-color: #ffddaa;
	color: #7d0000;
}

#menu li:hover ul li.selected a {
  color: yellow;
}

#menu li:hover ul li a:hover { /* Here we define the most explicit hover states--what happens when you hover each individual link. */
	background-color: #7d0000;
	color: white;
}


/****************/
/* Hanglejátszó */
/****************/

.soundPlayerContainer {
  visibility: hidden;
  position: relative;
  left: -2000px;
  height: 0;
}

#soundPlayer {
  visibility: hidden;
}


/********************/
/* Tartalmi dobozok */
/********************/

.fullBox, .contentBox, .sideBox, .leftBox, .rightBox {
  border: solid 1px #DF8600;
  background-color: #e8e8e8;
  padding: 5px;
  overflow: hidden;
  margin-bottom: 15px;
}

.fullBox {
  width: 830px;
}

.contentBox {
  width: 530px;
  margin-bottom: 15px;
}

.sideBox {
  float: right;
  width: 280px;
  clear: both;
  margin-bottom: 10px;
}

.leftBox {
  float: left;
  width: 405px;
  margin-bottom: 15px;
}

.rightBox {
  float: right;
  width: 405px;
  margin-bottom: 15px;
}

.fullBox h2, .contentBox h2, .sideBox h2, .leftBox h2, .rightBox h2 {
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  background-color: #DF8600;
  color: white;
  margin: 0px 0px 3px;
  padding: 2px 0px 2px 0px;
}

.fullBox h3, .contentBox h3, .sideBox h3 .leftBox h3, .rightBox h3 {
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  background-color: white;
  color: black;
  margin: 0px 0px 3px;
  padding: 2px 0px 2px 0px;
}



/**********/
/* Szótár */
/**********/

/* szótár az alap szótároldalon */

.dictionary {
}

.dictionary table.list {
  width: 100%;
  margin: 15px 0px 0px 0px;
  border-collapse: collapse;
  table-layout: fixed;
}

.dictionary table.list a {
  color: blue;
  text-decoration: none;
}

.dictionary table.list tr {
}

.dictionary table.list tr.odd {
  background-color: white;
}

.dictionary table.list tr.even {
  background-color: #e8e8e8;
}

.dictionary table.list tr:hover {
  background-color: #ffddaa;
}

.dialog table.list tr:hover {
  background-color: inherit;
}

.dictionary table.list td {
  vertical-align: top;
  padding: 3px;
}

.dictionary table.list td.pronunciation {
  width: 10%;
}

.dictionary table.list td.sourceText {
  width: 20%;
}

.dictionary table.list td.sourceAltText {
  width: 25%;
}

.dictionary table.list td.targetText {
  width: 50%;
}

table.toolbared tr div.toolbarContainer {
  position: relative;
  width: 100%;
}

table.toolbared tr div.toolbarContainer div.toolbar {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  width: auto;
}

table.toolbared tr:hover div.toolbarContainer div.toolbar {
  display: inline;
}

table.toolbared tr:hover table.list tr div.toolbarContainer div.toolbar {
  display: none;
}

table.toolbared tr:hover table.list tr:hover div.toolbarContainer div.toolbar {
  display: inline;
}

/* toolbar for phrase list of a lesson */

div.toolbared div.toolbarContainer {
  position: relative;
  width: 100%;
}

div.toolbared div.toolbarContainer div.toolbar {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  width: auto;
}

div.toolbared:hover div.toolbarContainer div.toolbar {
  display: inline;
}

/* dialogs for lessons and wordlists of dictionary items */

#dictionaryItemLessonsDialog, #dictionaryItemWordlistsDialog {
  display: none;
}

.dialog {
}

.dialog p.loading {
  text-align: center;
  padding: 50px 0px 50px 0px;
  vertical-align: middle;
  background-image: url('../images/loading.gif');
  background-repeat: no-repeat;
  background-position: center 20px;
}


/* list of lessons */

.itemLessons {
  width: 430px;
  margin-bottom: 15px;
}

.itemLessons h3 {
  font-size: 10px;
  font-weight: bold;
  margin: 10px 0px 5px 0px;
}

.itemLessons p.book {
  font-size: 10px;
  font-weight: bold;
  margin-top: 10px;
}

.itemLessons p.lesson {
  font-size: 10px;
  margin: 0px 0px 0px 10px;
}

.itemLessons p.lesson  a {
  color: blue;
}

/* list of wordlists */

.itemWordlists {
  width: 430px;
  margin-bottom: 15px;
}

.itemWordlists h3 {
  font-size: 10px;
  font-weight: bold;
  margin: 10px 0px 5px 0px;
}

.itemWordlists table.wordlists {
  width: 100%;
  font-size: 10px;
}

.itemWordlists table.wordlists tr:hover {
  background-color: #e8e8e8;
}

.itemWordlists table.wordlists td {
  padding: 5px 3px 5px 20px;
}

.itemWordlists table.wordlists td.title {
  font-weight: normal;
}

.itemWordlists table.wordlists td.hasItem {
  font-weight: bold;
  background-image: url('../images/tick.png');
  background-repeat: no-repeat;
  background-position: 2px 2px;
}

.itemWordlists table.wordlists td.processing {
  background-image: url('../images/loading.gif');
  background-repeat: no-repeat;
  background-position: 2px 2px;
}

.itemWordlists table.wordlists input#newWordlistTitle {
  width: 300px;
}


/* keresési űrlap */

.dictionary form.search {
  width: 100%;
  background-color: white;
  border: solid 1px #DF8600;
  padding: 5px 5px 5px 5px;
}

.dictionary form.search table {
  width: 100%;
}

.dictionary form.search table td {
  padding: 2px;
}

.dictionary form.search table td.label {
  width: 30%;
}

.dictionary form.search input {
  width: 350px;
  border: solid 1px black;
  margin: 0;
  padding: 2px;
}

.dictionary form.search select {
  border: solid 1px black;
  margin: 0;
}

.dictionary button {
  border: solid 1px black;
}


.dictionary form.search button.submit {
  width: 100px;
}

.dictionary .keyboard {
  margin: 0;
  padding: 0px 0px 0px 0px;
}

.dictionary .keyboard p {
  margin: 0px 0px 5px 0px;
  padding: 0;
}

.dictionary .keyboard button {
  width: 20px;
  border: solid 1px black;
}


/* a leckék szószedete */

.sideBox table.list {
  width: 100%;
  margin: 0px 0px 0px 0px;
  border-collapse: collapse;
}

.sideBox table.list a {
  color: blue;
  text-decoration: none;
}

.sideBox table.list tr.odd {
  background-color: white;
}

.sideBox table.list tr.even {
  background-color: #e8e8e8;
}

.sideBox table.list td {
  vertical-align: top;
  padding: 3px;
}

.sideBox table.list td.sourceText {
}

.sideBox table.list td.sourceAltText {
}

.sideBox table.list td.targetText {
}

.sideBox table.list td.pronunciation {
}

/*********/
/* Lecke */
/*********/

.grammarContainer {
}

.exerciseContainer {
}

.readingContainer {
}

/****************/
/* Lecke menüje */
/****************/

ul.lessonMenu {
  text-align: left;
  padding-bottom: 2px;
  padding-left: 5px;
  border-bottom: solid 1px #7D0000;
  margin-bottom: 10px;
}

ul.lessonMenu li {
  display: inline;
  margin: 0px;
}

ul.lessonMenu li.selected {
}

ul.lessonMenu li a {
  border: solid 1px #7D0000;
  border-bottom: none;
  text-align: center;
  margin: 2px;
  padding: 2px 10px 2px 10px;
  font-variant: small-caps;
  font-size: 14px;
  text-decoration: none;
}

ul.lessonMenu li a:visited {
}

ul.lessonMenu li a:hover {
  color: #7D0000;
}

ul.lessonMenu li a:active {
}

/*****/

ul.lessonMenu li.enabled a {
  color: black;
  font-weight: bold;
}

ul.lessonMenu li.enabled a:hover {
  color: #7D0000;
}

/*****/

ul.lessonMenu li.disabled a {
  color: #999999;
  font-weight: normal;
}

/*****/

ul.lessonMenu li.selected a {
  color: #7D0000;
  font-weight: bold;
  border-bottom: solid 1px #e8e8e8;
}


.lessonTab {
  display: none;
}

/***************/
/* Olvasmányok */
/***************/

#tabReading img.lessonImage {
  margin: 5px 0px 15px 0px;
}



/******************************/
/* Párbeszédek és kifejezések */
/******************************/

.dialogue, .phrases {
}

.dialogue .description {
  background-color: #ffddaa;
  padding: 5px 40px 5px 5px;
  margin-bottom: 2px;
  text-align: justify;
}

.dialogue .description img {
  float: right;
  margin: 0px -155px 0px 0px;
}

.dialogue .item,
.phrases .item {
  padding: 2px 2px 2px 2px;
  margin-bottom: 2px;
  background-color: white;
  min-height: 18px;
}

.dialogue .item .sourceText,
.phrases .item .sourceText {
  margin: 0px;
  padding: 2px 2px 2px 30px;
}

.dialogue .item .sourceAltText,
.phrases .item .sourceAltText {
  margin: 0px;
  padding: 2px 2px 2px 30px;
}

.dialogue .item .targetText,
.phrases .item .targetText {
  margin: 0px;
  padding: 2px 2px 2px 30px;
}

.dialogue .item .targetAltText,
.phrases .item .targetAltText {
  margin: 0px;
  padding: 2px 2px 2px 30px;
}

.dialogue .item .pronunciation,
.phrases .item .pronunciation {
  float: left;
  margin: 0px;
  padding: 2px 5px 0px 5px;
}

.dialogue .dialoguePlayer {
  background-color: #ffddaa;
  color: #7d0000;
  font-weight: bold;
  margin: 0px;
  padding: 2px 2px 2px 2px;
}

.dialogue .dialoguePlayer .label {
  float: right;
  margin-right: 2px;
  margin-top: 2px;
}


/**********************************************************/
/* Nyelv/feliratválasztó párbeszédekhez és kifejezésekhez */
/**********************************************************/

ul.switcherBar {
  margin: 5px;
  text-align: center;
}

ul.switcherBar li {
  display: inline;
  margin: 0px 10px 0px 10px;
  padding-left: 20px;
}

ul.switcherBar li.selected {
  background-image: url('../images/tick.png');
  background-repeat: no-repeat;
  background-position: left center;
}

ul.switcherBar li a {
  color: grey;
}

ul.switcherBar li.selected a {
  color: #7d0000;
}


/****************/
/* Profil oldal */
/****************/

ul.books {
}

ul.books li {
  list-style: none;
  margin-bottom: 5px;
}

ul.books li a {
  text-decoration: none;
  font-weight: bold;
}

ul.books li a:hover {
  text-decoration: underline;
}

ul.books li a:visited {
}

ul.books li a:active {
}

table.permissions {
  font-size: 12px;
  margin: 2px 0px 5px 15px;
}

table.permissions td {
  padding: 0px 15px 0px 0px;
}

table.permissions .code {
  font-weight: bold;
}

table.permissions .date {
  font-weight: bold;
}

.profile .label {
  font-weight: bold;
}

.profile .data {
  font-weight: normal;
  margin: 2px 0px 10px 0px;
  padding: 2px 2px 2px 10px;
  background-color: white;
}

.buttonbar {
  text-align: center;
  margin-top: 15px;
  padding-top: 10px;
  border-top: solid 1px #aaaaaa;
}

.ip .label {
  font-weight: bold;
}

.ip .data {
  font-weight: normal;
  margin: 2px 0px 10px 0px;
  padding: 2px 2px 2px 10px;
  background-color: white;
}


/*************/
/* Szólisták */
/*************/

.wordlistPage {
}

.wordlistPage .buttonbar {
  margin-bottom: 15px;
}

table.wordlist {
  width: 100%;
  margin-bottom: 10px;
}

table.wordlist tr {
}

table.wordlist tr.title {
}

table.wordlist tr.title:hover a {
}

table.wordlist td {
}

table.wordlist td.title {
  background-color: white;
  border: solid 1px #DF8600;
  font-weight: bold;
  vertical-align: top;
  padding: 5px 3px 5px 3px;
  margin-top: 5px;
}

table.wordlist a.title {
  text-decoration: none;
}

table.wordlist a.title:after {
  content: '  ▼';
}

table.wordlist tr.open a.title:after {
  content: '  ▲';
}

table.wordlist td.button {
  text-align: right;
  vertical-align: top;
  padding: 5px 0px 5px 0px;
}

table.wordlist table.list {
  margin: 0px 0px 0px 0px;
}

table.wordlist .dictionary {
  display: none;
}

table.wordlist .dictionary .listContainer {
  border: solid 1px #DF8600;
  background-color: white;
  padding: 3px;
}



/***********/
/* Űrlapok */
/***********/

.form {
}

.form .row {
  margin: 10px 0px 0px 0px;
  padding: 3px;
}

.form label {
  font-weight: bold;
  width: 150px;
  float: left;
  margin-top: 3px;
}

.form input {
  width: 300px;
  margin: 0px 0px 0px 0px;
  padding: 2px 2px 2px 2px;
  border: solid 1px black;
  background-color: white;
}

.form input[type=submit] {
  width: auto;
  margin-top: 15px;
  padding: 0px 15px 0px 15px;
  margin: 0px 0px 0px 150px;
  font-weight: bold;
}

.form .error {
}

.form .hint {
  margin: 2px 0px 0px 150px;
  width: 300px;
  font-size: 10px;
}

.form .note {
}

.form .errorMessage {
  margin: 2px 0px 0px 150px;
  color: red;
  font-size: 11px;
  font-weight: bold;
  width: 300px;
}

.form .errorSummary {
  color: black;
  font-weight: bold;
  font-size: 10px;
  margin: 10px 0px 10px 0px;
  padding: 3px 3px 3px 0px;
}

.form .errorSummary li {
  color: red;
  list-style-type: none;
}

/******************************************/
/* Könyvhöz és leckéhez kapcsolódó dolgok */
/******************************************/

.bookTitle {
  text-align: center; 
  margin-bottom: 15px;
  font-weight: bold;
  font-variant: small-caps;
  font-size: 14px;
}

.bookTitleLabel {
  font-weight: normal;
}

ul.bookMenu {
   margin: 0px 0px 25px 0px;
   padding: 0;
   font-weight: bold;
   height: 1em;
   z-index: 200;
   position: relative;
}

ul.bookMenu li {
   list-style: none;
   float: left;
   background-color: #ffddaa;
   margin: 0px 2px 0px 2px;
}

ul.bookMenu li a {
   display: block;
   padding: 5px 10px;
   background-color: #ffddaa;
   color: #7d0000;
   text-decoration: none;
}

ul.bookMenu li a:hover {
   background-color: #7d0000;
   color: white;
   text-decoration: none;
}

ul.bookMenu li a .arrow {
   float: right;
}

ul.bookMenu li ul {
   display: none; 
   width: auto;
   background-color: #ffddaa;
}

ul.bookMenu li:hover ul, ul.bookMenu li.hover ul {
   display: block;
   position: absolute;
   margin: 0;
   padding: 0;
   border-left: solid 1px #7d0000;
   border-right: solid 1px #7d0000;
   border-bottom: solid 1px #7d0000;
}

ul.bookMenu li:hover li, ul.bookMenu li.hover li {
   float: none;
}

ul.bookMenu li:hover li a, ul.bookMenu li.hover li a {
   background-color: #ffddaa;
   color: #7d0000;
   border-bottom: solid 1px lightgrey;
}

ul.bookMenu li li a:hover {
   background-color: #7d0000;
   color: white;
}

ul.bookMenu li.selected a {
  background-color: #7d0000;
  color: white;
  text-decoration: none;
}
   
ul.bookMenu li.lesson {
  width: 500px;
}

ul.bookMenu li.lesson ul {
  
}

ul.bookMenu li.lesson ul li {
  width: 494px;
}

ul.bookMenu li.grammar {
  width: 200px;
  text-align: center;
}

ul.bookMenu li.vocabulary {
  width: 100px;
  text-align: center;
}

ul.grammars {
  margin-left: 20px;
}

ul.grammars li {
  list-style: disc;
  margin: 0px 0px 3px 0px;
}



/*************/
/* Hibaoldal */
/*************/

.errorPage {
  background-image: url("../images/hiba.png");
  background-repeat: no-repeat;
  background-position: 10px 20px;
  background-color: white;
  border: solid 2px #7d0000;
  padding: 10px 10px 10px 70px;
  margin-top: 30px;
}

h1, h2, h3 {
  color: #7d0000;
}

.errorPage p {
  line-height: 150%;
}

img.illustration {
  float: right;
  border: solid 1px #aaaaaa;
  margin-left: 20px;
}


/*************/
/* Login box */
/*************/

div.loginBox {
  width: 500px;
  display: none;
  padding: 15px;
}


/***************/
/* Message box */
/***************/

div.messageBox {
  width: 450px;
  display: none;
  padding: 15px;
}


/*************/
/* input box */
/*************/

div.inputBox {
  width: 450px;
  display: none;
  padding: 15px;
}

div.inputBox input {
  display: block;
  margin: 15px 0px 0px 0px;
  padding: 2px;
  width: 100%;
  border: solid 1px black;
}


/********************/
/* Confirmation box */
/********************/

div.confirmBox {
  width: 450px;
  display: none;
  padding: 15px;
}


/**************/
/* Login form */
/**************/

.login .buttonbar {
  text-align: left;
}

/*************/
/* Book list */
/************/

ul.bookList {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

ul.bookList li {
  margin: 0 0 20px 30px;
  display: block;
  clear: both;
}

ul.bookList li .title {
  font-size: 1.5em;
  color: #7d0000;
  margin: 0;
  padding: 0;
}

ul.bookList img.cover {
  float: left;
  margin: 0px 15px 15px 0;
  width: 100px;
  box-shadow: 5px 5px 5px grey;
}

/*************/
/* Book data */
/************/

div.book {
}

div.book h1 {
}

div.book h2 {
  margin-bottom: 0;
  padding-bottom: 0;
}

div.book img.cover {
  float: left;
  margin: 0px 15px 15px 30px;
  width: 150px;
  box-shadow: 5px 5px 5px grey;
}

div.book .price {
  color: #7d0000;
  font-weight: bold;
  font-size: 1.5em;
}

div.book .lessons {
  color: #7d0000;
  font-weight: bold;
}

div.book .description {
}

div.book .lesson {
  width: 100%;
}

div.book .lesson .title {
  display: inline-block;
  color: #7d0000;
  font-weight: bold;
  margin: 15px 0 0 30px;
}

div.book .lesson .audio {
}

div.book .lesson .audio .title {
  font-weight: normal;
  color: black;
  display: inline-block;
  width: 300px;
  margin: 0;
  padding: 0 0 0 50px;
}

div.book .lesson .audioPlayer {
  display: inline-block;
  width: 250px;
  height: 20px;
}

div.book .lesson .audio .download {
  display: inline-block;
  width: 22px;
  height: 22px;
  background: url("../images/download.png") no-repeat;
  margin: 0;
  padding: 0;
  text-indent: -2000px;
  overflow: hidden;
}

/***************************/
/* Chinese character drawer*/
/***************************/
#character {
float: right;
}

.characterDrawer {
  background-color: #ffffff;
}

p.sample a {
text-decoration: underline;
}