body {
font-family: "arial", "helvetica", sans-serif;
font-size: 12px;
text-align:center;
}

img {
border: 0px;
}

input {
border-radius: 3px;
border: 1px solid #008000;
padding: 3px;
}

input[type=checkbox] {
border-radius: 3px;
border: 1px solid #008000;
width: 18px;
height: 18px;
}

select {
border-radius: 3px;
border: 1px solid #008000;
padding: 3px;
}

.page {
position: relative;
width: 960px;
margin:auto;
}

.newitem {
  margin-bottom: 5px;
  width: 650px;
}

.userlist {
clear: both;
margin-top: 20px;
}

.userlist td {
padding-right: 15px;
}

.userlist tr:nth-child(odd) {
background: #F8F1C2;
}

.dcontrolbuttons {
border-radius: 3px;
border: 1px solid #008000;
background: #F8F1C2;
padding: 3px;
}

.savemessage {
background:#33FF66;
border: 1px solid #008000;
padding: 6px;
border-radius: 5px;
}

.savemessagefail {
background: #EE4444;
border: 1px solid #CC0000;
padding: 6px;
border-radius: 5px;
}

.header {
position: relative;
display: block;
height: 50px;
margin-bottom: 10px;
background: #f8f1c2;
border: 2px solid #008000;
border-radius: 5px;
}

.headerleft {
position: relative;
display: block;
top:8px;
left: 8px;
float: left;
width: 108px;
height: 36px;
background: url('bannerleft.gif');
}

.headerweb {
position: relative;
display: block;
top: 3px;
right: 3px;
float: right;
width: 51px;
height: 46px;
background: url('bannerweb.gif');
}

.headermob {
position: relative;
display: none;
top: 3px;
right: 3px;
float:right;
width: 60px;
height: 46px;
background: url('bannermob.gif');
}

.fieldsleft {
width: 460px;
float: left;
display: block;
position: relative;
border-radius: 5px;
}

.settingspanel {
position: relative;
display: block;
height: 100%;
background: #fbf8EA;
border: 1px solid green;
border-radius: 5px;
padding: 15px;
}

.fieldsright {
width: 460px;
float: right;
display: block;
position: relative;
border-radius: 5px;
}

fieldset {
border-radius: 5px;
}
.newdothis {
height: 15px;
border-radius: 3px;
border: 1px solid #008000;
padding: 3px;
}

#dothis {
height: 15px;
border-radius: 3px;
border: 1px solid #008000;
padding: 3px;
}

.client {
  padding-bottom: 10px;
  font-weight: bold;
}

.footer {
position: relative;
margin-top:10px;
clear: both;
width: 100%;
}

.container {
display: block;
position: relative;
text-align:left;
}

.sidebanner {
width: 160px;
display: block;
float:right;
top: 0px;
}

.menu {
position: relative;
width: 100%;
height: 20px;
color: #004000;
font-size:12px;
background: #f8f1c2;
border: 1px solid green;
padding-top: 10px;
padding-bottom:10px;
border-radius: 5px;
}

a {
font-size:12px;
color: green;
}

.Fleft {
display: block;
float: left;
width: 55%;
color: #004000;
background: #f8f1c2;
padding: 10px;
border: 1px solid green;
border-radius: 5px;
}

.Fright {
display: block;
float: right;
width: 35%;
color: #004000;
background: #f8f1c2;
padding: 10px;
border: 1px solid green;
margin-left: 10px;
border-radius: 5px;
}

.welcome {
position: relative;
display: block;
height: 20px;
width: 100%;
}

.welcomeleft {
float: left;
}

.welcomeright {
float: right;
}

.menuleft {
position: relative;
width: 30%;
float: left;
margin-left:10px;
}

.menucentre {
position: relative;
width: 15%;
float: left;
text-align: center;
margin-left: 15%;
}

.menuright {
position: relative;
width: 30%;
float: right;
text-align: right;
margin-right:10px;
}

.addpanel {
position: relative;
display: block;
width: 100%;
height: 100%;
border: 1px solid green;
}

.todo {
position: relative;
display: block;
width: 100%;
max-height: 100%;
overflow: hidden;
background: #fbf8EA;
border: 1px solid green;
border-radius: 5px;
margin-bottom: 10px;
}


.ToDoDeleted {
  position: relative;
  overflow: hidden;
  max-height: 0px;
  background: #ffffff;
  color: #ffffff;
  transition: 0.2s;
  -moz-transition: 0.2s;
  margin-bottom: 0px;
}

.faq {
padding: 10px;
}

html>body .faq {
width: 740px;
}

.todotext {
position: relative;
display: block;
height: 100%;
padding: 5px;
float: left;
overflow-wrap: break-word;
word-wrap: break-word;
}

.itemeditline {
width: 100%;
padding-left:0px;
height: 29px;
clear: both;
}

.itemeditlineleft {
float:left;
padding: 5px;
}

.todobuttons {
position: relative;
height: 16px;
padding: 3px;
background: #fff;
border: 1px solid green;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 5px;
float: right;
border-radius: 5px;
}

.itemedit {
display: none;
width: 720px;
padding-left: 10px;
padding-bottom: 10px;
height: 100%;
clear: both;
}

.calendar {
position: relative;
display: none;
left: 747px;
width: 195px;
padding: 5px;
margin-bottom: 5px;
border: 1px solid #008000;
border-radius: 4px;
clear: both;
}

.alertbox {
  text-align: center;
  background: green;
  color: black;
  width: 100%;
  padding: 10px;
  border-radius: 4px;
  border: 1px solid black;
}

.repeat {
position: relative;
display: none;
left: 5px;
width:400px;
padding: 5px;
margin-bottom: 5px;
border: 1px solid #008000;
border-radius: 4px;
clear: both;
}

.controlbuttons{
width: 16px;
height: 16px;
border: 0px;
outline: none;
}

#done {
background: url("done.gif") no-repeat;
}

#later {
background: url("later.gif") no-repeat;
}

#muchlater {
background: url("muchlater.gif") no-repeat;
}

#doit {
background: url("doit.gif") no-repeat;
}

#boxit {
background: url("box.gif") no-repeat;
}

#calendar {
background: url("calendar.gif") no-repeat;
}

#victory {
background: url("victory.gif") no-repeat;
}

#purge {
background: url("purge.gif") no-repeat;
}

#undo {
background: url("undo.gif") no-repeat;
}

#save {
background: url("save.gif") no-repeat;
background-position: 10% 50%;
}

#edit {
background: url("save.gif") no-repeat;
background-position: 10% 50%;
}

#calendarsave {
background: url("calendar.gif") no-repeat;
background-position: 10% 50%;
}

@media screen and (max-width: 650px) {
  
      input[type=text],
      input[type=email],
      input[type=url],
      input[type=password],
      textarea,
      select {
	width: 90%; 
      }
  
    body {
    font-size: 24px;
    }

    input {
      font-size:16px;
    }

    select {
      font-size:16px;
    }


    textarea {
      font-size:16px;
      height: 20px;
    }

    input.checkbox {
      width:30px;
      height: 30px;
    }

    .checked{
    background:#ff0000;
    }

    .newdothis {
      height: 20px;
    }

    .page {
    width: 100%;
    }

    .header {
    width: 100%;
    }

    html>body .header {
    width: 100%;
    }

    .headerweb {
    display: none;
    }

    .Fleft {
    width: 100%;
    }

    .Fright {
    width: 100%;
    margin-left:0px;
    margin-top: 10px;

    }

    .welcome {
    height: 75px;
    }

    .welcomeleft {
      width: 90%;
    }

    .welcomeright {
      margin-top:10px;
      float: left;
    }

    .headermob {
    display: block;
    }

    a {
    font-size:24px;
    }

    .menu {
    font-size:24px;
    height: 32px;
    width: 100%
    }

    html>body .menu {
    width: 100%
    }

    .menuleft {
      width: 25%;
    }
    .menucentre {
      width: 18%;
    }

    .menuright {
      width: 48%;
    }

    .controlbuttons{
    width: 32px;
    height: 32px;
    margin-left: 8px;
    margin-right:8px;
    border: 0px;
    outline: none;
    }

    .calendar {
      width:300px;
      left: 10px;
    }

    #calendar {
    height: 36px;
    padding-left: 25px;
    padding-right: 5px;
    }

    #save {
    height: 36px;
    padding-left: 25px;
    padding-right: 5px;
    }

    #edit {
    height: 36px;
    padding-left: 25px;
    padding-right: 5px;
    }

    .itemeditline {
    height: 45px;
    }

    .todobuttons {
    height: 35px;
    }

    .faq {
      width: 95%;
    }

    html> body .faq {
      width: 95%;
    }

    #done {
    background: url("mob/done.gif") no-repeat;
    }

    #later {
    background: url("mob/later.gif") no-repeat;
    }

    #muchlater {
    background: url("mob/muchlater.gif") no-repeat;
    }

    #doit {
    background: url("mob/doit.gif") no-repeat;
    }

    #boxit {
    background: url("mob/box.gif") no-repeat;
    }

    #calendar {
    background: url("mob/calendar.gif") no-repeat;
    }

    #victory {
    background: url("mob/victory.gif") no-repeat;
    }

    #purge {
    background: url("mob/purge.gif") no-repeat;
    }

    #undo {
    background: url("mob/undo.gif") no-repeat;
    }

    #save {
    background: url("mob/save.gif") no-repeat;
    }

    #edit {
    background: url("mob/save.gif") no-repeat;
    }

}