﻿#flashcards-left { float: left; font-size: 12px; line-height: 12px; }
#flashcards-left span.label { font-weight: bold; }

#progress { 
    height: 100px; width: 160px; padding: 5px; color: #fff; 
    background-color: #2578B8; border: 1px solid #2578B8; 
}
#progress p { line-height: 15px; margin: 0; }
#progress span.label { color: #fff; }
#accuracy { 
    display: block; font-size: 35px; text-align: center; 
    height: 55px; line-height: 55px;
}

#current-settings { 
    height: 205px; width: 160px; margin-top: 5px; padding: 5px; 
    background-color: #F7F7F7; border: 1px solid #D3D6DB;
}
#current-settings ul { height: 150px; list-style: none; }
#current-settings li { margin-bottom: 15px;  }
#settings-button { height: 40px; width: 110px; line-height: 40px; margin-left: 30px; }

#flashcard-display { width: 545px; height: 332px; float: left; margin-left: 5px; border: 1px solid #C0C0C0;  }
#qa { height: 203px; padding-top: 70px; font-family: Arial, sans-serif; }
#qa1 { height: 75px; font-size: 52px; text-align: center; margin: 0 0 20px 0; }
#qa1 span.hiragana { font-size: 25px !important; font-weight: normal; }
#qa2 { font-size: 24px; text-align: center;  }
#flashcard-display a { color: #2274FF; text-decoration: none !important; cursor: pointer; }
#flashcard-display a:link, #flashcard-display a:visited { color: #2274FF; }
#flashcard-buttons { margin: 0 0 0 15px; }
#flashcard-buttons input[type="button"] { 
    float: right; display: inline-block; height: 40px; width: 110px; margin-right: 15px; cursor: pointer;
    color: #000; line-height: 40px; text-align: center; vertical-align: central;
}
#flashcard-buttons input.blue { background-color: #69B3DC; border: solid 1px #2578B8; float: right; }
#flashcard-buttons input.blue:hover { cursor: pointer; background-color: #4791ba; border: 1px solid #035696; }
#flashcard-buttons input.green { background-color: #7BF87B; border: solid 1px #37B437; float: right; }
#flashcard-buttons input.green:hover { cursor: pointer; background-color: #59d659; border: 1px solid #169215; }
#flashcard-buttons input.red { background-color: #FF7D7E; border: solid 1px #DD3A3A; float: right; }
#flashcard-buttons input.red:hover { cursor: pointer; background-color: #dd5b5c; border: 1px solid #bb1818; }


/* Settings 
----------------------------------------------------------*/

#settings-window { display: none; width: 450px; font-size: 12px; }
#settings-content { padding: 15px; line-height: 20px; }
#settings-content div.left { margin: 0 70px 15px 0; }
#settings-content h2 { font-size: 13px; color: #555; margin: 0; }
#settings-window select { width: 150px; margin-bottom: 10px; }
#settings-window p { margin: 0 0 5px 0; }
#settings-window input[type="radio"] { padding: 0; margin: 0 10px 0 0; }
#subgroup-list1, #subgroup-list2 { width: 80px; height: 100px; display: inline-block; margin-right: 10px; vertical-align: top; }


/* Message Window
----------------------------------------------------------*/

#message-window { display: none; width: 400px; }
#message-window h2 { font-size: 15px; color: #555; }
#message-window p { padding: 15px 15px 0 15px; font-size: 13px; margin-bottom: 50px; }
#message-window input[type="button"], #message-window input[type="submit"] { 
    display: inline-block; float: right; margin: 0 15px 15px 0;
}


/* Footer 
----------------------------------------------------------*/

#footer, #push { height: 115px; }
#footer { padding-top: 10px;  background-color: #eee; border-top: 1px solid #D3D6DB; min-width: 760px; }
#adds { margin: 0 auto 0 auto; width: 750px; }
#adds li { 
    display: block; float: left; margin-left: 90px; width: 110px;
    text-align: center; line-height: 15px;  font-size: 11px; 
}
#adds li.first { margin-left: 20px; }
#adds li img.add-img { height: 80px; }

#add-box { 
    height: 80px; width: 500px; padding: 10px; cursor: pointer;
    background-color: #fff; color: #555;
    -webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px;
}
#add-box img { height: 78px; width: 78px; float: left; }
#add-copy { float: left; width: 400px; padding-left: 10px; }
#add-copy h1 { font-size: 15px; margin-bottom: 5px; }
#add-copy p { font-size: 12px; margin-bottom: 8px;  }
#add-copy h2 { font-size: 11px; color: #999; }

