/***********************
  =global reset
      
  html, body, ul, ol, li, p,
  h1, h2, h3, h4, h5, h6,
  form, fieldset, a, img, dl, dt, dd
************************/

* {
    margin: 0;
    padding: 0;
    border: 0; /* will cause input boxes on forms to be invisible */
    }

p {
    margin-top: 13px;
    margin-bottom: 13px;  
    }
    
input { /* reverse border reset for text fields so we at least notice them */
	border: 1px dotted;
    }

/***********************
        =layout
************************/

body {
	margin-top: 25px;
	text-align: center; /* IE needs this to center the container*/
	min-width: 760px; /* Netscape 6 fix */
	background: url(/images/bg_body.png) top repeat-x;
    }

#wrapper {
    width: 750px;
    text-align: left; /* reset the text-align: center; we had to set in body */
    margin-left: auto;
    margin-right: auto;
    background: #fff;  
    }

#container {
    padding: 10px;
    }

#main {
    width: 100%;  
    text-align: center;
    }

#home {
    width: 450px;
    margin: 20px 0 5px 10px;
    text-align: left;  
    float: left;  
    /*padding-top: 5px;*/
    }

#add_word {
    margin: 20px auto;  
    width: 255px;
    text-align: left;
    }

#practice {
    margin: 20px auto;  
    width: 255px;
    text-align: left;
    }

#menu {
    margin-bottom: 0px;
    background: url(/images/bg_menu.png) top repeat-x;
    background-color: #f5f5f5; 
    height: 30px;
    border-top: solid 1px #ccc;
    border-bottom: solid 1px #ccc;
    clear: both;
    }

#menu_left {    
    float: left;
    }
    
#disclaimer {
	padding-top: 20px;
	padding-bottom: 20px;
	text-align: justify;
    }

/* Safari hack */
/*.webkit #menu_left {
  padding-top: 2px;
}*/

/* Opera hack */
/*.opera #menu_left {
  padding-top: 1px;
}*/

#menu_right {  
    float: right; 
    padding-top: 7px;
    padding-right: 2px;
    }

/* Safari hack */
.webkit #menu_right {
    padding-top: 8px;
    }
    
#sidebar {
    float: right;	
    width: 200px;
    margin: 20px 0 0px 0;	
    padding: 0px 0 0 0;
    }    

#footer {
    /* Floated elements in footer disappear in IE5 because of Shadow divs.. this solves the problem */
	width: 100%; 
    clear: both;
    }

#footer .left {
    float: left;  
    padding: 10px 10px 0px 10px;
    }

.copyright {
    clear: both;
    text-align: center; 
    height: 35px;  
    }

#footer .right {
    float: right;
    padding: 10px 10px 0px 10px;
    }

/************************
         =design
*************************/
body {  
    background-color: #f7f7f7;  
    }

#menu ul {  
    padding-bottom: 4px;
    padding-top: 4px;
    margin: 0;
    text-indent: 0;  
    }

#menu li {    
    padding: 10px;
    margin: 0;
    display: inline;
    list-style: none;
    list-style-image: none;
    text-indent: 0;
    }

/* if we float this left, it will disappear in IE5 (because of Shadow DIVS). In case we'll need to do that, we can use Width: 100% hack 
oo! not anymore - fixed with zoom=1 (hasLayout)
*/
#header img {
    margin: 10px 0px 14px 0px;
    float: left; 
    }

#header h2 {
    float: right;
    margin-top: 43px;
    }

#footer {
    border-top: solid 1px #ccc;
    }

/***********************
      =typography
************************/

body {
    font-family: "Trebuchet MS", "Corbel", "Arial", sans-serif;
    font-size: 62.5%;  /* 62.5 = better?  76% */
    }

#menu {
/*  font-family: "Trebuchet MS", sans-serif;  */  
  /**font-weight: bold;  */
}

#home {
    font-family: "Verdana", "Arial", sans-serif;
    font-size: 1.0em;
    }

#home p { 
    font-weight: normal;
    font-size: 1.5em;
    margin-bottom: 16px;
    line-height: 19px;
    }

#sidebar h2 {
    font-size: 1.2em;    
    }   

#menu_left { 
    font-size: 1.6em;
    }

#menu_right {
    font-size: 1.3em;  
    }

#home h2 { 
    font-size: 1.8em;    
    }
    
#add_word #options {
    font-size: 1.2em;
    /*font-weight: bold;*/
    }

/*#header h2 {
  color: #666;
  font-family: "Corbel", "Verdana", "Arial", sans-serif;  
}

#main h1 {
  text-transform: none;
  font-size: 30px;
  padding: 0px 0;
  margin: 0 0 25px 0;
  letter-spacing: -1px;
}

#main h2 {
  text-transform: none;
  font-size: 24px;
  padding: 0px 0 5px 0;
  margin: 0px 0 10px 0;
  letter-spacing: 0px;  
}

#main h3 {
  text-transform: none;
  font-size: 14px;
  padding: 5px 0;
  margin: 10px 0 0px 0;
  letter-spacing: 0px;
}

#sidebar h2 {
  font-size: 14px;
  color: #666;  
}

#sidebar h1, #sidebar h2 {  
  margin: 10px 0 3px 0;
  padding: 0;  
}*/

/*#footer .left {    
  font-size: 1.2em;
}

#footer .right {
  font-size: 1.2em;
}*/

#footer /*.copyright*/ {
    font-size: 1.3em;
    }

/***********************
        =color
************************/

#sidebar h2 {    
    color: #666;    
    }   

#home h2 { 
    color: #36988E;  
    color: #23a8c0;
    color: #23a8c0; /*nice light blue*/
    color: #25b3cd;  
    color: #84CE55; /*nice green - like in logo!*/
    color: #69c; /*blue*/
    color: #23a8c0;
    color: #77a;
    font-size: 1.8em; 
    font-weight: bold;
    }

.copyright {  
    color: #999;
    }

.dim {
    color: #777;
    }

.dark_dim {
    color: #444;
    }

/***********************
        =links
************************/

a {
    color: #003a7d;  
    text-decoration: none;
    }

a.language {
    text-decoration:none;
    border-bottom:1px dotted gray;
    }

a.language:hover {
    text-decoration:none;
    background: #F0F5FA;
    border-bottom: 1px solid #D6E2EE;
    }

a:hover {
    color: #003a7d;  
    text-decoration: underline;  
    /*background-color: #ddd;*/
    }

#menu a {
    color: #6a6a6a;    
    padding: 0 0px;
    text-decoration: none;
    }

#submenu a {
    color: #777;    
    padding: 0 0px;
    text-decoration: none;
    }

#menu a:hover {

}

#menu .current_page_item a { 
    color: black;
    border-bottom: solid 2px #003a7d;
    padding: 4px 0px;
    }

#menu a:hover { 
  
}

/***********************
        =shadow
 
Problem in IE6:
If there is a floated element directly inside wrapper, The element is unexpectedly hidden behind another element (shadow divs)!

"A floated child hides behind its non-layout parent"

"zoom: 1" fixes IE6 bug, because gives has Layout to these DIVs (in IE5 this probably doesn't work, because zoom doesn't give hasLayout.       

MORE info:
http://www.satzansatz.de/cssd/rpfloat.html

************************/
#shadow-container {
	position: relative;
	left: 3px;
	top: 0px;
	margin-right: 3px;
	margin-bottom: 3px;
	zoom: 1;
    }

#shadow-container .shadow2,
#shadow-container .shadow3,
#shadow-container .shadow-container2 {
	position: relative;
	left: -1px;
	top: -1px;	
	zoom: 1;
    }

#shadow-container .shadow1 {
	background: #F1F0F1;
	zoom: 1;
    }

#shadow-container .shadow2 {
	background: #DBDADB;
	zoom: 1;	
    }

#shadow-container .shadow3 {
	background: #B8B6B8;
	zoom: 1;
    }

#shadow-container .shadow-container2 {
	background: #ffffff;
	border: 1px solid #848284;
	padding: 0px;
	zoom: 1;
    }

/***********************
        =forms
************************/
    
/*--------------*/
/* GET-STARTED  */
/*--------------*/

ol#get-started {
	clear: both;
	padding-top: 0px;
	/*padding-bottom: 20px;*/
    }    
    
ol#get-started li {
    display:block;
    float:left;
    font-size:11px;
    line-height:130%;
    margin:0pt 10px 0px 0px;
    padding:10px 0px 20px 0px;
    width:130px;
    }
    
ol#get-started li#li_find {
    /*background:transparent url(/images/comic1.png) no-repeat 0 0;*/
    color:#6C758C;
    }    
    
ol#get-started li#li_add {
    /*background:transparent url(/images/comic2.png) no-repeat 0 0;*/
    color:#6C758C;
    }
    
ol#get-started li#li_practice {
    /*background:transparent url(/images/comic3.png) no-repeat 0 0;*/
    color:#6C758C;
    }
    
ol#get-started li strong {
    display:block;
    float:left;
    font-family:"Trebuchet MS",Arial,Verdana;
    font-size:38px;
    padding:10px 10px 10px 0pt;
    }

/*--------------*/
/*     LOGIN    */
/*--------------*/

#login {
    width: 200px;
    line-height: 1.8em;    
    background: #f2f1f1 url(/images/bg_login.png) repeat-x;
    }

#login form {
	font-family: Verdana; /*#12223#*/
    background: url(/images/login_top.png) top no-repeat;
    color: #666;
    font-size: 1.2em;
    }

#login dl {
    background: url(/images/login_bottom.png) bottom no-repeat;
    padding: 10px 10px 5px 10px;
    }

#login dd {
    margin: 0 0 10px 0;
    display:block;    
    }

#login dd.submit {
    text-align: right;
    }   

#login a {
    display: block;
    font-size: 0.8em;
    color: #666;
    }

#login input {
    width: 174px;
    border: 2px solid #ddd;
    padding: 1px 0px 1px 0px;
    font: 1.25em "Trebuchet MS", "Corbel", "Arial", sans-serif;    
    background: transparent url(/images/bg-input-login.gif) repeat-x scroll 0pt;
    }

/* Log In button */
#login .submit input {
    color: #555;
    width: auto;
    }

#login input:focus {
    border: 2px solid #bbbbcc;
    }
    
/*--------------*/
/*      FAQ     */
/*--------------*/

dl.js_enabled dt {  
    cursor: pointer;  
    /*text-decoration: underline;*/
    }
    
.faq dt2 {
    color: #77a;
    font-size: 1.8em; 
    }
    
.faq dt {    
	/*background: #EEEEFF none repeat scroll 0%;*/
	background-color: #EEEEFF;
	/*background-image: url(/images/icons/arrow-right.png);*/	
    border-bottom: 2px solid #AAAAFF;
    font-family: "Trebuchet", "Helvetica", sans-serif;
    font-size:150%;
    font-style:normal;
    font-weight:normal;
    line-height:130%;
    /*margin-left:-3pt;
    margin-right:-3pt;*/
    padding-left:15pt;
    padding-right:3pt;
    margin-bottom: 3px;
    
    background-image: url(/images/icons/arrow-right.png);
    background-repeat: no-repeat;
    }
    
.faq .faq-right-arrow {
	background-image: url(/images/icons/arrow-right.png);
	background-repeat: no-repeat;
}

.faq .faq-down-arrow {
	background-image: url(/images/icons/arrow-down.png);
	background-repeat: no-repeat;
}

/*--------------*/
/*   ADD WORD   */
/*--------------*/

#add_word h2 {
    font-size: 1.2em;
    }

#add_word #language {
    font-family: "Trebuchet MS", "Corbel", "Arial", sans-serif;
    font-size: 1.5em;
    color: #003a7d;  
    }

#select_language {
    font-family: "Trebuchet MS", "Corbel", "Arial", sans-serif;
    font-weight: bold;
    background-color: #EEE;  
    font-size: 1.0em;
    color: #003a7d;
    border: 0;
    }

/* IE hack - combo is too big there - cannot remove frame */
.ie #select_language {  
  /*font-size: .8em;*/
}

#select_language:hover {
    background: #F3F3F3;/*#e5ecf9;*/
    }

#add_word form {
    margin-top: 15px;
    }

#add_word form #_word,
#add_word form #_translation,
#add_word form #_sentence {
    /*width: 255px;*/
    margin-bottom: 15px;
    }

#add_word form #_word img,
#add_word form #_translation img {
    float: right;
    display: block;
    }

#add_word form #_sentence a {
    float: right;
    font-size: 1.2em;
    }

#add_word form input#word, 
#add_word form input#meaning {
    background: #F2F1E8 url(/images/bg_form.gif) repeat-x scroll 0%;  
    background-position: top;
    border: 1px solid #BBBBBB;
    color: #003a7d;
    font-size: 1.6em;
    padding: 3px 2px; /* IE top padding is increased - look down */    
    width: 250px;  
    clear: both;
    font-family: "Trebuchet MS", Verdana, sans-serif; 
    }

#add_word form #sentence {
    background: #F2F1E8 url(/images/bg_form.gif) repeat-x scroll 0%;  
    background-position: top;
    border: 1px solid #BBBBBB;
    color: #003a7d;
    font-size: 1.3em;/*88%;*/
    padding: 2px;  
    width: 250px;  
    font-family: "Trebuchet MS", Verdana, sans-serif;
    overflow: hidden; /* remove scrollbar in IE and Opera */    
    }

#add_word_submit {
    margin-left: 203px;
    }

/* Safari hack */
.webkit input#word {
    width: 255px !important;  
    }

/* Safari hack */
.webkit input#meaning {
    width: 255px !important;  
    }

/* Safari hack */
.webkit #sentence {
    width: 255px !important;  
    }

/*--------------*/
/*   PRACTICE   */
/*--------------*/

#practice form input#word {
    background: #F2F1E8 url(/images/bg_form.gif) repeat-x scroll 0%;  
    background-position: top;
    border: 1px solid #BBBBBB;
    color: #003a7d;
    font-size: 1.6em;
    padding: 3px 2px; /* IE top padding is increased - look down */    
    width: 250px;  
    clear: both;
    font-family: "Trebuchet MS", Verdana, sans-serif; 
    }

#practice h1 {
    font-size: 2.7em;
    color: #003a7d;
    margin-bottom: 20px;
    }

#practice form h2 {
    font-size: 1.2em;
    }

#practice #question img {
    float: right;    
    }

#practice input#submit {
    float:right;
    margin-top: 15px;
    margin-left: 150px;
    }

#practice #options {
    float: left;
    margin-top: 5px;
    font-size: 1.2em;
    }

#practice #stars {    
    float: right;
    margin-top: 5px;
    }

#practice input#word {
    
}

/*--------------*/
/*    RESULT    */
/*--------------*/

#result #message {
    float: left; 
    padding-top: 5px;
    color: #008C00;
    font-size: 1.2em;
    }
    
#result h1 {
    color: #003a7d;
    }

#result #options {    
    float: right;
    margin-top: 4px;
    font-size: 1.2em;
    }

#result_container h2 {
    font-size: 1.0em;
    }

#result_container #counter {
    float: right;
    margin-top: -15px;
    color: #666;
    font-size: 1.0em;
    }

#options_top {  
    /*border-top: 2px solid #CCCCCC;*/
    /*background: #FAF6F1;*/
    height: 15px;
    }

#ask_again {  
    float: left; 
    margin-top: 15px;
    }

/*#options_bottom {
  border-bottom: 0px solid #CCCCCC;  
  background: #FAF6F1;
  background: #F7F7F7 url(/images/bg_result_top.png) repeat-x 0%;
  padding: 0px 10px;
  padding-top: 5px;
  height: 25px;  
  text-align: center;
}*/

#result_top {   
    padding-top: 20px;
    padding-bottom: 20px;
    }

#result_top h1 {
    font-size: 28px;  
    }

#result_top img {
    margin-right: 2px;
    /*display: inline;*/
    }

#result_top #translation {
    margin: 0px 20px 0px 20px;
    font-size: 12px;
    }

#result_sentence {
    border-top:1px solid #CCCCCC;  
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 12px;
    }

#result_options {
    /*border-top:1px solid #CCCCCC;*/
    padding-top: 20px;
    }

#result_container {
    margin: 40px auto;  
    margin-bottom: 50px;
    /*margin: 20px auto 20px 300px;*/
    width: 320px;
    text-align: left;
    }

#result {
    background: #F7F7F7 url(/images/bg_result.png) repeat-x 0%;
    background-position: top;
    border-top: 2px solid #CCCCCC;
    border-bottom:2px solid #CCCCCC;  
    padding: 0px 20px 0px 20px;
    }

#options_bottom {
    width: 320px;
    font-size: 12px;
    }

/***********************
        =misc
************************/
.alert {
	background: #fff6bf url(/images/icons/exclamation.png) center no-repeat;
	background-position: 15px 50%; /* x-pos y-pos */
	text-align: left;
	font-size: 1.1em;	
	padding: 5px 20px 5px 45px;
	border-top: 2px solid #ffd324;
	border-bottom: 2px solid #ffd324;
    }


/***********************
        =yet to group
************************/


/*******************************************/
/* HOME*/
/*******************************************/


/*******************************************/
/* HOME*/
/*******************************************/

#home {
    color: #333;
    } 

#home { 
    color: #333;  
    }

#recommendation {
    float: right;
    margin-top: 25px;
    font-size: 1.2em;
    color: #777;
    font-family: "Verdana", "Arial", sans-serif;
    }

/*#login form, #login dl, #login dt, #login dd {
/* not needed but you did not reset dd ? 
    margin: 0;
    padding:0;
       
}*/