.transparent_msg {
    position: absolute; left: 25%; width: 50%;
    color: white; background-color: #8CC63F;
    font-size: 36pt; text-align: center; 
}

.transparent_msg .round {
    border-left: solid 2px white; border-right: solid 2px white;
    font-size: 1px; height: 2px;
}

.transparent_msg p { 
  padding: 6px; 
  font-size: 24px;
}

body {
  margin: 0;
  padding: 0;
}

a:hover img {
  background-color: white;
}

form p.buttons {
  text-align: right;
  margin-right: 3px;
}

.clear_float {
  clear: both;
}

p.clear_float {
  height: 1px;
  margin: 0;
  paddgin: 0;
}

a.button {
  display:block;
  width: 155px;
  border:1px solid #7d7;
  background-color: #cec;
  padding: 5px;
  text-decoration: none;
  color: green;
}
a.button:visited { color: green; }

#session_main .introduction a.button,
#session_main .introduction a.button:visited { color: green; margin-top: 35px; }

#session_main .introduction a.button:hover { 
  color: white; 
  background-color: #52e553;
  border-color: #1b1;
}

#session_main .signature { text-align: right; margin-top: 45px; font-size: 14px;}

ul {
  list-style: none;
}

ul.messages { margin: 5px; }
ul.messages li { font-size: 12px; margin-bottom; 7px;}
ul.messages li em { font-style: normal; text-decoration: underline; }
ul.messages li span.ago { color: #cfc; font-style: italic;  }

ul.dones { margin: 5px; }
ul.dones li { font-size: 12px; margin-bottom: 7px;}
ul.dones li span.ago { color: #555; font-style: italic;  }



.todos .todo {
  float: left;
}

.todos li span {
  float: left;
  display: inline;
}

.todos .todo {
  padding: 0;

}

.todos li span.icon {
  width: 17px;
  height: 17px;
  padding: 1px;
  margin: 0;
}
.todos li span.icon_check {
  width: 18px;
  margin-left: -8px;
  margin-top: -3px;
}
.todos li span.icon_due_loading {
  margin-left: 60px;
}

.todos li span.icon_delete img {
  margin-top: 3px;
  vertical-align: bottom;
}

.todos li span.icon_alarm img {
  margin-top: 5px;
}

.todos li span.icon_alarm {
  cursor: pointer;
}

#all {
  /*
  margin: 0 auto;
  width: 840px;
  */
}


#header {
  padding-top: 15px; 
  padding-bottom: 10px;
  position: relative;
  border-bottom: 7px solid #44aa44;

  background-color: #228822;
  /*
  background-image: url(/images/alarm_logo.png);
  background-repeat:  no-repeat;
  background-position:  1% 50%;
  */
}

#header #logo {
  vertical-align: middle;
}

#header .title_wrapper {
  margin-left: 10px;
  margin-right: 10px;
  margin-top: -10px;
  margin-bottom: 10px;
  text-align: right;
  color: #999;
  font-family:"Lucida Grande",Arial,Sans-serif;
}

#header .login_name {
  color: #fff;
  font-size: 14px;
  font-weight: bold;
}

#header, #header a, #header a:visited { 
  font-size: 12px;
  color: #eee; 
}

#header a, #header .login_name {
  margin: 0 5px;
}


#header a:hover {
  color: white;
}

#header a.guide_menu,
#header a.guide_menu:visited {
  color: red;
}


#header form  {
  margin-right: 10px;
  text-align: right;
}

#header #time {
  font-size: larger;
  color: #ff8;
  text-align: left;
  margin-top: -18px;
  margin-left: 85px;
}

#search_query { 
  background:#FFFFFF url(/images/search.png) no-repeat scroll 0px 3px;
  font-size: 18px;
  padding-left: 20px;
  padding-top: 5px;
  padding-bottom: 5px;
  border: 2px solid #666;
  width: 238px;
}


#header .title {
  font-weight: bold;
  margin-left: 10px;
  float: left;
}
#header .title a {
  font-size: 32px;
  color: white;
  text-decoration: none;
}
#header .title a:hover {
  text-decoration: underline;
}

#header .title span{
  font-size: 22px;
  color: yellow;
}


#main {
  background-color: #ffffde;
  padding-top: 15px;
  margin-right: 0px;
  padding-right: 10px;
  border-left: 1px solid #ccc;
  min-height: 450px;
  width: 669px;
}

#main h2 { 
  margin-left: 10px;
  margin-bottom: 5px;
  margin-top: 15px;
  font-size: 16px;
  font-weight: bold;
  color: #3364ef;
  border-bottom: 2px solid #dddddd;
}

p.more {
  margin-left: 40px;
}
p.more a {
  color: white;
  background-color: green;
  padding: 1px 3px;
  text-decoration: none;
}
p.more a:hover {
  background-color: #2a2;
}



#new_todo { 
  margin-left: 10px;
}
#new_todo #todo_body { width: 360px; }
#new_todo #todo_until { width: 140px; }

#new_todo #todo_body,  
#new_todo #todo_until { 
  border: 3px solid #4B4;
  color: #777;
  font-size: 14px;
  padding: 6px 3px;
  margin-right: 0px;
  margin-left: 0px;
}
#new_todo #todo_body:focus,  
#new_todo #todo_until:focus { 
  background-color: yellow;
}

#new_todo #todo_submit {
  /*
  background-color: #e5e5e5;
  color: #777;
  */
  background-color: #393;
  color: #fff;

  font-size: 14px;
  border: 2px solid #3b3;
  padding: 2px 10px;
  margin-left: 5px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
}
#new_todo #todo_submit:hover { background-color: #5b5; color: #fff; }
#new_todo #todo_body.active,  #new_todo #todo_until.active { color: black; }

ul.todos { 
  margin: 0;
  /*
  padding-left: 10px; 
  */
}

.todos_done .body, .todos_done .done_at { color: #888; }

.todo {
  padding-bottom: 0px;
  margin-bottom: 7px;
  border-bottom: 1px solid #ddd;
}

.todos_done .done_at { color: #282; }
.focus {  font-weight: bold; }

.todo form,
.todo form textarea, 
.todo form div {
  display: inline;
}

.todo form textarea {
  font-size: 15px;
  margin-bottom: 0;
  width: 405px;
  height: 40px;
}

.todo form select {
  font-size: 15px;
  width: 100px;
  margin-right: 20px;
}

.todo .done_at,
.todo .due {
  color: #d22; 
  font-size: 11px;
  width: 95px;
  padding: 3px 0;
  margin: 3px 3px 3px 15px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  /*
  -webkit-border-top-right-radius: 4px;
  -webkit-border-bottom-left-radius: 4px;
  */
}

.todo .due_done {
  background-color: #a5ffa5;
  color:  #445;
  padding-left: 5px;
  padding-right: 3px;
}

.todo .due_over {
  background-color: #f44;
  color: white;
  padding-left: 5px;
  padding-right: 3px;
}
.todo .due_left {
  background-color: #ffb8b8;
  padding-left: 5px;
  padding-right: 3px;
}

.todo .body_wrap { width: 400px; }
.todos_done .body { width: 400px; }

.todo .body em { color: #45f; }

.todo .body_category {
  color: #393;
  margin-left: 5px;
  text-decoration: underline;
}


a img {
  border: none;
}

#session_main {
  width: 800px;
  height: 440px;
  background-color: #3b78e5;
  margin: 50px auto;
  padding: 20px;
  color: #fff;
}

#session_main a, 
#session_main a:visited {
  color: white;
  font-weight: bold;
}


#session_main h1 {
  font-weight: bold;
  color: #52e553;
  font-size: 44px;
}
#session_main h2 {
  font-weight: bold;
  color: #52e553;
  font-size: 34px;
}
#session_main h3 {
  font-size: 22px;
  margin-bottom: 10px;
  margin-top: 30px;
  color: #fff;
}

.introduction {
  float: left;
  width: 440px;
  margin-top: 10px;
  margin-right: 10px;
  padding-right: 20px;
  padding-left: 30px;
  font-size: 15px;
}

.intro_narrow { width: 390px; }

.introduction .warning { color: red; }

.introduction ul { list-style-type: disc; }
.introduction li { margin-top: 5px; }

.introduction p span,
.introduction li span { color: #52e553; }



#session_main .introduction a,
#session_main .introduction a:visited {
  color: #fff;
  margin-left: 0px;
}
#session_main .introduction a:hover { color: #52e553;}

#session_main .introduction a.out_link {
  color: #52e553;
  text-decoration: none;
}

.introduction, .login_box  { text-align: left; }
.login_box {
  float: left;
  width: 300px;
  height: 80%;
  padding-top: 10px;
  font-size: 16px;
}

/*
.box_wide { width: 300px; }
*/

.login_box input { font-size: 16px; }
.inner_box {
  border-left: 1px solid #bdb;
  padding: 10px 0 10px 30px;
}
.inner_box dl {
  margin: 0; 
  padding: 0;
}

#show_box { margin-top: 40px; }
#login_box { margin-top: 40px; }
#signup_box { margin-top: 0px; }
#edit_box { margin-top: 50px; }
#signup_box input { }

.login_box input.text {
  width: 220px;
}

.due_edit input.until {
  width: 110px;
}
.due_edit {
  margin-left: 15px;
}


.user_info { margin-top: 70px; }
.user_info dd { margin-bottom: 15px; }

div.field {
  margin-bottom: 10px;
}

/* popup menu */

.menu { 
  position: relative; 
  cursor: pointer;
}

ul.popup {
  display: block;
  border: 1px solid #555;
  position: absolute;
  left: 15px;
  top: 14px;
  color: black;
  background-color: #ffffde;
  width: 100px;
  padding-left: 0px;
  margin-left:0;
  z-index: 5;
}

ul.popup li.last { border-top: 1px solid #555; }

ul.popup li a {
  font-size: 12px;
  display: block;
  pointer: cursor;
  color: black;
  padding-left: 10px;
  padding-top: 2px;
  padding-bottom: 2px;
  text-decoration: none;
}
ul.popup li a:hover {
  color: white;
  background-color: #666;
}

/* error */
.formError {
  margin-top: 0px;
  color: #f44;
}

.fieldWithErrors { } 
.fieldWithErrors input,
.fieldWithErrors input:focus {
  border: 1px solid red;
  margin: 0;
}

#footer {
  clear: both;
  margin-top: 0px;
  margin-bottom: 0;
  border-top: 5px solid #44AA44;
  border-bottom: 1px solid #eee;
  text-align: center;
  background-color: #228822;
  padding: 5px 0px;
  color: #999;
  font-size: 11px;
}

#footer span, #footer a, #footer a:visited { color: white; padding: 0 4px;}
#footer a:hover { text-decoration: underline;  }

div.see_all {
  text-align: right;
  padding-right: 62px;
  font-size: 12px;
}

div.see_all a, div.see_all span { margin-left: 10px; }

.main_button, .main_button:hover {
  padding: 2px 5px;
  background-color: #4374ff;
  text-decoration: none;
  color: white;

  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
}

.main_button:hover {
  background-color: #5384ff;
}

#main_wrapper {
  background-image: url(/images/2color_body.png);
  background-repeat: repeat-y;
}

#main.calendar {
  width: auto; 
  padding-left: 10px;
}