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

*{margin:0;padding:0;}
.clear {clear:both;}

body {background:url('images/branding-bg.gif') top center repeat-x; text-align:center; font-family:Helvetica, Arial, sans-serif; font-size:14px;}

blockquote {padding-left:20px;}
p {padding: 10px 0;}

#wrapper {width:960px; margin:0 auto; text-align:left;}

/* === TOP BRANDING =========================== */
#branding {height:40px;}
#ut-branding {display:block; float:left; height:40px;}
#cola-branding {display:block; float:right; height:40px;}
/* === END TOP BRANDING ======================= */
  
#container {padding-top:29px;}

a:link, a:visited {color:#d3032f; text-decoration:none;}
a:hover, a:active {background-color:#000; color:#fff;}
a.pronunciation-tips:link, a.pronunciation-tips:visited {text-decoration:none; color:#d3032f; font-weight:bold;}
a.pronunciation-tips:hover, a.pronunciation-tips:active {text-decoration:none; color:#fff; font-weight:bold;}

#header {height:110px; border:solid #000; border-width:0 0 4px 0;}
#learning #header, #practice #header {border:solid #000; border-width:0 0 4px 0;}

#title h1 {height:64px; width:960px; text-indent:-9999px;}
a#title:link, a#title:visited {display:block; height:64px; width:960px; background:url('images/title.gif') top center no-repeat; margin-bottom:14px;}
a#title:hover, a#title:active {background:url('images/title.gif') bottom center no-repeat;}
#header h2 {height:18px; height:960px; text-indent:-9999px; background:url('images/subtitle.gif') top center no-repeat;}

#home-content:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}

#home-learning {margin-top:10px; float:left; width:476px; height:476px; background:url('images/home-learning.jpg') top left no-repeat;}
#home-learning a:link, #home-learning a:visited {display:block; width:332px; height:332px; text-indent:-9999px; margin:68px 0 0 75px;}
#home-learning a:hover, #home-learning a:active {background:url('images/home-learning-hover.jpg') center center no-repeat;}
#home-practice {margin-top:10px; float:right; width:476px; height:476px; background:url('images/home-practice.jpg') top left no-repeat;}
#home-practice a:link, #home-practice a:visited {display:block; width:332px; height:332px; text-indent:-9999px; margin:67px 0 0 71px;}
#home-practice a:hover, #home-practice a:active {background:url('images/home-practice-hover.jpg') center center no-repeat;}

#area-title {margin-top:15px;}

#learning-menu {width:950px; height:105px; padding:20px 0 0 10px; margin-top:7px; border:solid #000; border-width:0 0 4px 0; background:url('images/menu-bg.jpg') top left no-repeat;}
#learning-menu li {list-style:none; float:left; margin:0 8px 0 0;}
#learning-menu li:last-child {margin-right:0;}
#learning-menu a:link, #learning-menu a:visited {display:block; width:65px; height:28px; padding-top:72px; text-align:center; text-decoration:none; font-weight:bold; color:#d3032f; font-size:16px;}
#learning-menu a:hover, #learning-menu a:active {background:none;}
#learning-menu a span {display:block; height:23px; width:65px; padding-top:5px;}
#learning-menu a:hover span {background-color:#000; color:#fff;}
/*#learning-menu #mi0 {background-image:url('images/learning-icon-info.gif'); background-repeat:no-repeat;}
#learning-menu #mi1 {background-image:url('images/learning-icon-goat.gif'); background-repeat:no-repeat;}
#learning-menu #mi2 {background-image:url('images/learning-icon-rooster.gif'); background-repeat:no-repeat;}
#learning-menu #mi3 {background-image:url('images/learning-icon-ox.gif'); background-repeat:no-repeat;}
#learning-menu #mi4 {background-image:url('images/learning-icon-goat.gif'); background-repeat:no-repeat;}
#learning-menu #mi5 {background-image:url('images/learning-icon-goat.gif'); background-repeat:no-repeat;}
#learning-menu #mi6 {background-image:url('images/learning-icon-goat.gif'); background-repeat:no-repeat;}
#learning-menu #mi7 {background-image:url('images/learning-icon-goat.gif'); background-repeat:no-repeat;}
#learning-menu #mi8 {background-image:url('images/learning-icon-goat.gif'); background-repeat:no-repeat;}
#learning-menu #mi9 {background-image:url('images/learning-icon-goat.gif'); background-repeat:no-repeat;}
#learning-menu #mi10 {background-image:url('images/learning-icon-goat.gif'); background-repeat:no-repeat;}
#learning-menu #mi11 {background-image:url('images/learning-icon-goat.gif'); background-repeat:no-repeat;}
#learning-menu #mi12 {background-image:url('images/learning-icon-goat.gif'); background-repeat:no-repeat;}*/

#learning h3, #practice h3 {width:960px; height:40px; padding:15px 0 20px; font-family:"Times New Roman", Times, serif; text-align:center; font-style:italic; font-size:30px; font-weight:normal;}
#learning h4, #practice h4 {font-size:19px; font-weight:normal; text-align: center;}

#initials, #finals, #pages {background:#ebebeb; font-size:22px; padding:10px 20px; margin:15px 0; font-weight:bold; text-align: center;}

#initials h5, #finals h5, #pages h5 {display:inline; font-size:24px; font-weight:normal;}
#tips {margin-top: 7px;}
a.trigger_link {padding: 4px 5px 0 3px;}
a.trigger_link:hover {padding: 4px 5px 0 3px; background-color:#000; color:#fff; }
div.hidden_content {overflow:hidden; display:none;}
.selected {background:#000; color:#fff!important;}
#init_box, #final_box, #syl_box, #tones_box, #rules_box, #last_box, #asdf_box, #questions {display:none; padding:15px 20px; background:#fff;
	-moz-box-shadow: 2px 2px 6px #666;
	-webkit-box-shadow: 2px 2px 6px #666;
	box-shadow: 2px 2px 6px #666;}
	


.learning-intro {min-height:613px; background:url('images/learning-intro-bg.gif') bottom center no-repeat;}
.learning-11 {min-height:900px; background:url('images/unit_images/dog2.png') bottom center no-repeat;}
.learning-12 {min-height:930px; background:url('images/unit_images/boar2.png') bottom center no-repeat;}

#content {padding:30px 0 0 50px;}

#learning #unit-pic {float:right; margin:0 0px 40px 0;}
#learning td a:link, #learning td a:visited {font-weight:bold;}
#learning td a:hover, #learning td a:active {}
#learning .top-table, #tips table {border-collapse:collapse;}
#learning .top-table td {width:70px; padding-bottom:7px; border-collapse:collapse; padding-top:7px; text-align:center;}
#learning .bottom-table {clear:both;}
#learning .bottom-table td {width:215px; padding:5px 5px;}

tr.hl {background:#ebebeb;}

/* Practice section styles ================= */

#practice h5 {display:inline; margin-right:10px;}
#practice .question {margin-right:3em; font-size: 1.3em; padding: 5px;}
#practice .question:hover {background-color:#000; color:#fff; padding: 5px;}
#practice .setfiveLetters {margin-left:3px; font-size: 1.3em}
#practice .a1, #practice .a2 {background: #dfdfdf; border:none; height: 2.2em;} /* Note: Margins between input boxes for Unit 1 and 2 is controlled within HTML */
#practice .submit {background: #5a259a; border: none; width: 60px; color: #fff; margin:1px; margin-left:5px; height: 2.2em;}
#practice .submit:hover {background: #000; border: none; color: #fff; margin:1px; margin-left:5px;}

#practice .set1right {background:#a6ffa8;}
#practice .set1wrong {background:#ffa6a6;}
 
#practice-menu {width:950px; height:185px; padding-bottom:10px; margin-top:7px; border:solid #000; border-width:0 0 4px 0; background:url('images/menu-practice.jpg') top center no-repeat;}
#practice-menu li {list-style:none; float:left; margin:0 65px 0 0;}
#practice-menu li:last-child {margin-right:0;}
#practice-menu li:first-child {padding-left:95px;}
#practice-menu a:link, #learning-menu a:visited {display:block; width:100px; height:28px; padding-top:135px; text-align:center; text-decoration:none; font-weight:bold; color:#9c84b9; font-size:16px;}
#practice-menu a:hover, #learning-menu a:active {background:none;}
#practice-menu a span {display:block; height:23px; width:100px; padding:5px 0 5px 0; margin-top: 10px;}
#practice-menu a:hover span {background-color:#000; color:#fff; height: 33px; padding: 3px;}

#practice a:link, #practice a:visited {color:#9c84b9; text-decoration:none;}

#footer {clear:both; margin-top:20px; padding:10px 0 25px; border:solid #000; border-width:4px 0 0 0; text-align:center;}
#footer-practice {clear:both; margin-top:20px; padding:10px 0 25px; border:solid #000; border-width:4px 0 0 0; text-align:center;}

/* Practice - Question output styles ================= */

input {text-align: center;}
IMG.displayed {display: block; margin-left: auto; margin-right: auto }
td {height: 2.5em; font-size: 1.125em;}
input.right.checked + label {color: #42c042;}
input.wrong.checked + label {color: red;}
/* Apply padding to td elements that are direct children of the tr element. */
tr.spaceUnder > td {padding-top: 1em;}
.radioques td, .radioquesfive td {padding-right: 40px;}
.radioquesfive td:last-child,  .radioques td:last-child {padding: 0;}
.green {color:#42c042; font-size: 30px; }
.red {font-size: 30px; color: red;}
.setfiveletters {margin-left: 5px;}

/* Credits Page ================= */
    #sta {
        float:left;
        width:420px;
        margin: 30px 0 30px 0;
    }
    #sidebar {
        float:right;
        width:420px;
        margin: 30px 0 30px 0;
    }
    #credits h1 {
        font-size: 30px;
        font-style: italic;
        font-family:"Times New Roman", Times, serif;
        text-align:center;
    }
    #credits {
        margin-top:30px;
    }
    #main h1, #sidebar h1 {
        margin:10px 0 10px 0;
    }
    #main h2, #sidebar h2 {
        margin:5px 0 5px 0;
    }
    #main h3, #sidebar h3 {
        margin:5px 0 5px 0;
    }
    #sta h1 {
        font-family:Helvetica, Ariel;
        font-size:22px;
        margin-top:10px;
        margin-left:20px;
        text-align:center;
    }
    .each_sta {
        margin-left:20px;
    }
    a.sta_link img {
        padding-bottom: 0px;
    }
    a.sta_link_more img {
        margin-top:30px;
    }
    
    #sidebarImg {
        margin-top:250px;
    }
    a.sta_link_right img {
        margin-top:5px;
    }
    .sta_hover {
    }
    #info h1, h2, h3, p {
        font-family:Helvetica, Ariel;
        font-size:22px;
        margin-top:10px;
        text-align:center;
    }
    #info h2 {
        font-size:20px;
        padding-top:20px;
    }
    #info h3 {
        font-size:18px;
        font-family:"Times New Roman", Times, serif;
        padding-top:5px;
    }
    #info p {
        font-size: 16px;
        text-aligned: left;
        line-height: 1.5em;
        text-align: left;
    }
    #staff {
        padding-bottom:75px;
        margin-bottom:9px;
    }
    #staff h1, h2, h3 {
        font-family:Helvetica, Ariel;
        font-size:22px;
        margin-top:10px;
        text-align:center;
    }
    #staff h1 {
        padding-top:20px;
        margin-bottom:-10px;
    }
    #staff h2 {
        font-size:18px;
    }
    #staff h3 {
        font-size:16px;
        font-family:"Times New Roman", Times, serif;
        padding-top:10px;
    }
    .each_staff {
        width:250px;
        margin:20px auto;
        border-top:5px solid black;
        border-top-width:medium;
        padding-top:15px;
    }
    #each_staff_noBorder {
        border:none;
    }