*{margin:0;padding:0;}

body {
	background: #3c9158 url(../images/bg.jpg) top center repeat-x;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	}

a:link, a:visited {
	color: #ca2a69;
	text-decoration: none;
	}

a:hover, a:active {
	color: #ff86b6;
	}

.clear {
	clear: both;
	}

#container {
	width: 720px;
	margin: 0 auto;
	text-align: left;s
	}

#header {
	height: 56px;
	}
	
#cola-link {
	display: block;
	padding-top: 17px;
	float: left;
	}

#das-link {
	display: block;
	padding-top: 27px;
	float: right;
	}

#banner {
	padding: 107px 0 0 24px;
	height: 22px;
	background: #56192e url(../images/title.gif) top center no-repeat;
	color: #ca2a69;
	font-size: 17px;
	}

#banner2 {
	padding: 107px 0 0 24px;
	height: 22px;
	background: #56192e url(../images/title2.gif) top center no-repeat;
	color: #ca2a69;
	font-size: 17px;
	position: relative;
	}

#banner a:link, #banner a:visited, #banner2 a:link, #banner2 a:visited {
	color: #ca2a69;
	text-decoration: none;
	}

#banner a:hover, #banner a:active, #banner2 a:hover, #banner2 a:active {
	color: #ff86b6;
	}

/* SPLASH CONTENT */

#splash {
	background: url(../images/home-bg.jpg) top center no-repeat;
	width: 720px;
	height: 475px;
	position: relative;
	}

#splash a:link, #splash a:visited {
	display: block;
	width: 677px;
	height: 204px;
	position: absolute;
	top: 92px;
	left: 20px;
	background: url(../images/splash-glow.jpg) top center no-repeat;
	}

#splash a:hover, #splash a:active {
	background: url(../images/splash-glow.jpg) bottom center no-repeat;
	}

/* INSIDE BANNER STYLE */

a.banner-glow:link, a.banner-glow:visited {
	display: block;
	width: 681px;
	height: 66px;
	position: absolute;
	top: 21px;
	left: 19px;
	background: url(../images/banner-glow.jpg) top right no-repeat;
	}

a.banner-glow:hover, a.banner-glow:active {
	background: url(../images/banner-glow.jpg) bottom right no-repeat;
	}

/* MENU STYLES */

#menu {
	height: 280px;
	}

#menu img {
	float: left;
	}

#menu-right {
	width: 295px;
	height: 280px;
	float: right;
	background: #f3f9da;
	}

#menu-title {
	padding: 2px 0 0 10px;
	height: 28px;
	background: #fff;
	}

#units {
	display: block;
	list-style: none;
	padding: 15px 5px;
	width: 285px;
	}

#units li {
	display: block;
	float: left;
	width: 57px;
	text-align: center;
	}

#units a:link, #units a:visited {
	color: #ca2a69;
	text-decoration: none;
	font-size: 29px;
	}

#units a:hover, #units a:active {
	color: #ff86b6;
	}

/* CONTENT STYLES */

#content {
	padding: 14px 35px;
	background: #f3f9da;
	color: #26633a;
	}
	
h1 {
	color: #1d7339;
	}

h4 {
	float: right;
	color: #1d7339;
	margin: 6px 26px 0 0;	
	}

p {
	margin-bottom: 15px;
	}

#title-bar {
	padding: 2px 0 0 23px;
	height: 28px;
	background: #fff;
	}

#title-bar h1 {
	float: left;
	margin-right: 20px;
	}

#title-bar a:link, #title-bar a:visited {
	font-weight: normal;
	color: #ca2a69;
	text-decoration: none;
	}

#title-bar a:hover, #title-bar a:active {
	color: #ff86b6;
	}

#content td {
	padding: 5px;
	}

.hide {
	display: none;
	}

.result em {
	color: #00abc5;
	font-style: normal;
	font-size: 20px;
	font-weight: bold;
	}

.question {
	background: #e8e6cb;
	padding: 20px;
	margin-bottom: 20px;
	list-style: none;
	position: relative;
	}

.player {
    width: 90%;
	margin-bottom: 15px;
	}

.translation {
	margin: 10px 5px;
	font-size:16px; 	/* CHANGE FONT SIZE HERE!!!!!!!! */ 
	}

.question-num {
	position: absolute;
	top: 10px;
	right: 10px;
	color: #a8a68b;
	font-size: 35px;
	font-weight: bold;
	width: 60px;
	text-align: right;
	}

/* FOOTER STYLES */

#footer {
	padding: 4px 15px 0 0;
	height: 16px;
	background: #054219;
	color: #2bb95a;
	text-align: right;
	font-size: 11px;
	font-weight: bold;
	}

#footer a:link, #footer a:visited {
	color: #2bb95a;
	text-decoration: none;
	}

#footer a:hover, #footer a:active {
	color: #ff86b6;
	}
/*

 SoundManager 2: "page as playlist" example
 ------------------------------------------
 http://schillmania.com/projects/soundmanager2/

*/

.spectrum-container {
    display:none;
}

ul.use-spectrum li.sm2_playing .spectrum-container {
    position:absolute;
    left:0px;
    top:0px;
    margin-left:-266px;
    margin-top:-1px;
    display:block;
    background-color:#5588bb;
    border:1px solid #99ccff;
    border-radius:4px;
}

ul.use-spectrum .spectrum-box {
    position:relative;
    width:255px;
    font-size:1em;
    padding:2px 0px;
    height:1.2em;
    overflow:hidden;
}

ul.use-spectrum .spectrum-box .spectrum {
    position:absolute;
    left:0px;
    top:-2px;
    margin-top:20px;
    display:block;
    font-size:1px;
    width:1px;
    height:1px; /* set to 50px for a thick line, 1px for a thin line, etc. */
    overflow:hidden;
    background-color:#fff;
}

ul.playlist {
    list-style-type:none;
    margin:0px;
    padding:0px;
    /* font trickery */
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

ul.playlist li {
    /* assume all items will be sounds rather than wait for onload etc. in this example.. may differ for your uses. */
    position:relative;
    display:block;
    width:auto;
    font-size:2em;
    color:#666;
    padding:0.25em 0.5em 0.25em 0.5em;
    border:none;
    letter-spacing:-1px; /* ZOMG WEB X.0. ;) */
    -webkit-transition-property: hover;
    -webkit-transition: background-color 0.15s ease-in-out;
    -moz-transition: background-color 0.15s linear 0s; /* firefox 4 */
    -o-transition-property: background-color; /* opera 10.5 */
    -o-transition-duration: 0.15s;
}

ul.playlist li a {
	background: url('/chinese_take_in/images/play-button.png') top left no-repeat;
	background-size: contain;
	padding-left: 25px;
	display:block;
    text-decoration:none;
    font-weight:normal;
    font-size:75%;
    outline:none;
    position:relative;
    z-index:2;

}

ul.playlist li.sm2_playing,
ul.playlist li.sm2_paused,
ul.playlist li.sm2_playing a {
    color:#fff;
    border-radius:3px;
}

ul.playlist li:hover {
    background-color:#ff86b6;
}

ul.playlist li:hover a {
    color:#fff;
}

ul.playlist li.sm2_playing,
ul.playlist li.sm2_playing:hover {
    background-color:#ca2a69;
}

ul.playlist li.sm2_paused {
    background-color:#999;
}

ul.playlist li.sm2_playing:hover a,
ul.playlist li.sm2_paused a {
    color:#fff;
}

ul.playlist li .controls {
    display:none;
}

ul.playlist li .peak,
ul.playlist.use-peak li .peak {
    display:none;
    position:absolute;
    top:0.55em;
    right:0.5em;
}

ul.playlist li.sm2_playing .controls,
ul.playlist li.sm2_paused .controls {
    position:relative;
    display:block;
}

ul.playlist.use-peak li.sm2_playing .peak,
ul.playlist.use-peak li.sm2_paused .peak {
    display:inline;
    display:inline-block;
}

ul.playlist.use-peak li .peak {
    display:none; /* IE 7 */
}

ul.playlist li.sm2_paused .controls {
    background-color:#666;
}

ul.playlist li:hover .controls .statusbar {
    position:relative;
    cursor:-moz-grab;
    cursor:-webkit-grab;
    cursor:grab;
}

ul.playlist li.sm2_paused .controls .statusbar {
    background-color:#ccc;
}

ul.playlist li .controls {
    position:relative;
    margin-top:0.25em;
    margin-bottom:0.25em;
    background-color:#99ccff;
}

ul.playlist li .controls .statusbar {
    position:relative;
    height:0.5em;
    background-color:#1d7339;
    border:2px solid #fff;
    border-radius:2px;
    overflow:hidden;
    cursor:-moz-grab;
    cursor:-webkit-grab;
    cursor:grab;
}

ul.playlist li .controls.dragging .statusbar {
    cursor:-moz-grabbing;
    cursor:-webkit-grabbing;
    cursor:grabbing;
}

ul.playlist li .controls .statusbar .position,
ul.playlist li .controls .statusbar .loading,
ul.playlist li .controls .statusbar .annotation {
    position:absolute;
    left:0px;
    top:0px;
    height:0.5em;
}

ul.playlist li .controls .statusbar .position {
    background-color:#336699;
    border-right:3px solid #336699;
    border-radius:3px;
}

ul.playlist li.sm2_paused .controls .statusbar .position {
    background-color:#666;
    border-color:#666;
}

ul.playlist li .controls .statusbar .loading {
    background-color:#eee;
}

ul.playlist li .controls .statusbar .position,
ul.playlist li .controls .statusbar .loading {
    width:0px;
}

ul.playlist li.sm2_playing a.sm2_link,
ul.playlist li.sm2_paused a.sm2_link {
    margin-right:4.5em; /* room for timing stuff */
}

ul.playlist li .timing {
    position:absolute;
    display:none;
    text-align:right;
    right:1em;
    top:1em;
    width:auto;
    height:1em;
    padding:3px 5px;
    background-color:#336699;
    border:1px solid #99ccff;
    border-radius:4px;
    letter-spacing:0px;
    font:44% monaco,"VT-100","lucida console",courier,system;
    line-height:1em;
    vertical-align:middle;
}

ul.playlist.use-peak li .timing {
    right:4.25em;
}

ul.playlist li:hover .timing {
    z-index:2;
}

ul.playlist li .timing div.sm2_timing {
    margin:0px;
    padding:0px;
    margin-top:-1em;
}

ul.playlist li.sm2_playing .timing,
ul.playlist li.sm2_paused .timing {
    display:block;
}

ul.playlist li.sm2_paused .timing .sm2_position {
    text-decoration:blink; /* hee hee. first actual appropriate use? :D */
}

ul.playlist li.sm2_paused .timing,
ul.playlist.use-peak li.sm2_paused .peak {
    background-color:#888;
    border-color:#ccc;
}

/* peak data */

/* ul.playlist ... */

ul.playlist.use-peak li .peak {
    display:none;
    zoom:1;
    border:1px solid #99ccff;
    padding:2px;
    height:0.55em;
    border-radius:4px;
    background-color:#5588bb;
    width:0.8em;
    height:0.55em;
    margin-top:-3px;
}

ul.playlist.use-peak li .peak-box {
    position:relative;
    width:100%;
    height:0.55em;
    overflow:hidden;
}

ul.playlist li .peak .l,
ul.playlist li .peak .r {
    position:absolute;
    left:0px;
    top:0px;
    width:7px;
    height:50px;
    background:#fff;
    border:1px solid #fff;
    border-radius:1px;
    margin-top:1em;
}

ul.playlist li .peak .l {
    margin-right:1px;
}

ul.playlist li .peak .r {
    left:10px;
}

#control-template {
    display:none;
}