/* 
    Document   : iphone
    Created on : 26.08.2012, 19:07:48
    Author     : juerg
    Description:
        Purpose of the stylesheet follows.
*/

body {
    background-color: #ddd; /* Background color */
    color: #222;            /* Foreground color used for text */
    font-family: Helvetica; 
    font-size: 14px;
    margin: 0;              /* Amount of negative space around the outside of the body */
    padding: 0;             /* Amount of negative space around the inside of the body */
}
#header {
    background-color: #ccc;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#999));
    border-bottom: 1px solid #666;
    color: #222;
    display: block;
    font-size: 20px;
    font-weight: bold;
    margin: 0;
    padding: 10px 0px;
    text-align: center;
    text-decoration: none;
    text-shadow: 0px 1px 0px #fff;
}
#header div.leftButton {
    position: absolute;
    top: 7px;
    left: 6px;
    height: 30px;
    font-weight: bold;
    text-align: center;
    color: white;
    text-shadow: rgba(0,0,0,0.6) 0px -1px 0px;
    line-height: 28px;
    border-width: 0px 8px 0 8px;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#099), to(#0cc));
    -webkit-border-radius: 8px;
    -webkit-border-image: url(images/button.png) 0 8 0 8;
}
#header div.pressed {
    background-image: gradient(linear, left top, left bottom, from(#009), to(#00c));
    -webkit-border-image: url(images/button_clicked.png) 0 8 0 8;
}
ul {
    list-style: none;
    margin: 10px;
    padding: 0;
}
ul li a {
    background-color: #FFFFFF;
    border: 1px solid #999999;
    color: #222222;
    display: block;
    font-size: 17px;
    font-weight: bold;
    margin-bottom: -1px;
    padding: 12px 10px;
    text-decoration: none;
}
ul li:first-child a {
    -webkit-border-top-left-radius: 8px;
    -webkit-border-top-right-radius: 8px;
}
ul li:last-child a {
    -webkit-border-bottom-left-radius: 8px;
    -webkit-border-bottom-right-radius: 8px;
}
ul.hide {
    display: none;
}

#content {
    padding: 10px;
}
#box2{
    width: 40px;
    height: 40px;
    border: #e33b06 thick solid;
    color: #e33b06;
    right: -70px;
    bottom: -50px;
    position: relative;
}
/*
 Styles for Form Classes:
*/
form.jsForm{
    background: -webkit-gradient(linear, bottom, left 175px, from(#CCCCCC), to(#EEEEEE));
    background: -moz-linear-gradient(bottom, #CCCCCC, #EEEEEE 175px);
    margin:auto;
    position:relative;
    /*MK width:550px;*/
    width:390px;
    font-size: 20px;
    font-style: italic;
    color: #09C;
    text-decoration: none;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding:10px;
    border: 1px solid #999;
    border: inset 1px solid #333;
    -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}
form.jsForm label{
    clear: left;
    color: #888888;
    /*display: block;*/
    float: left;
    margin-bottom: 0.5em;
    padding-right: 10px;
    text-align: right;
    /*MK width: 190px;*/
    width: 100px;
}
td.jsFormField{
    padding-right: 10px;
    /*MK width: 300px;*/
    width: 300px;
}
form.jsFormField input{
    width: 100%;
    /*display: block;*/
    /*position: relative;*/
    /*top: -5px;*/
    border: 1px solid #999;
    height: 20px;
    -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
    margin-bottom: 3px;
    margin-top: 3px;
}
form.jsFormField select{
    width: 100%;
}
td.DateRangeField input {
    width: 47%; 
}
td.NumRangeField input {
    width: 47%;
}
td.jsFormField input{
    font-size: 20px;
    padding-right: 5px;
    width: 95%;
}
td.MultiSelectCheckboxField label{
    width: auto;
    float: none;
    margin: 0px;
    padding: 0px;
    /*MK color: #ffffff;*/  
     color: #fff;
}
td.MultiSelectCheckboxField input{
    width: auto;
    /*MK margin: 0px;*/
    margin: 10px;
    padding: 10px;
}
td.MultiSelectCheckboxField div.CheckboxGroup {
    border: 2px solid;
    border-color: #0cc;
    background-color: #09C;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding: 2px;
    margin: 2px;
    display: inline;
}
td.SearchField select {
    width: 20%;
}
td.SearchField input {
    width: 70%;
}
form.jsForm textarea.message {
    display:block;
}
form.jsForm input.button {
    font-size: 20px;
    display: inline;
    width: 100px;
    background:#09C;
    color:#fff;
    font-family: Tahoma, Geneva, sans-serif;
    height:30px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    border: 1p solid #999;
}
form.jsForm input.button:hover {
    background:#fff;
    color:#09C;
}
.error{
    font-style: italic;
    font-size: 14;
    color: #e33b06;
}
.info{
    font-style: italic;
    font-size: 14;
    color: blue;
}
.Toolbar{
    width: 100%;
    background-color: #09C;
    padding: 5px 5px 5px 5px;
    margin: 20px 0px 20px 0px;
}
.Button{
    border: solid 1px #00c;
    background-color: #0cc;
    color: #009;
    padding: 10px 10px 10px 10px;
    margin: 10px 10px 10px 10px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}
.Button a:link{
    text-decoration: none;
}