.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {display: inline-block;}  /* for IE/Mac */

/* base styles */
body { margin: 0 0 0 0; background: #cccccc; }
div { margin: 0; padding: 0px; font-family: Verdana, Arial,  Helvetica, sans-serif; font-size: 8pt; color: #003366; line-height: 14px; }
form { margin: 0; padding: 0px; }
img { border: 0px; }
table { padding: 0px; border: 0px; }
td { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt; color: #003366; }
h1, h2, h3, h4, h5 { padding: 0px; margin: 0; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; color: #003366; }
h1 { font-size: 10pt; color: #DA2824; line-height: 18px; }
h2 { font-size: 8pt; }
h3 { font-size: 9pt; }
p { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt; color: #003366; }
input, textarea { padding: 2px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt; }
select { padding: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt; }
a:link { color: #999999; text-decoration: underline; }
a:visited { color: #999999; text-decoration: underline; }
a:hover { color: #666666; text-decoration: underline; }

.input { padding-top: 3px; padding-bottom: 3px;}
.input label { width: 9em; float: left; text-align: right; line-height: 25px; font-size: 9pt; margin-right: 0.5em; display: block; }

.admininput { padding-top: 3px; padding-bottom: 3px;}
.admininput label { width: 16em; float: left; text-align: right; line-height: 25px; font-size: 8pt; margin-right: 0.5em; display: block; }

.error-message { color: red; padding-left: 17em;}
.admininput .error-message { color: red; padding-left: 17em;}


.msginput { padding-top: 3px; padding-bottom: 3px;}
.msginput label { width: 5em; float: left; text-align: right; line-height: 25px; font-size: 8pt; margin-right: 0.5em; display: block; font-weight: bold;}

.msgblank { padding-top: 3px; padding-bottom: 3px;}
.msgblank label { width: 5em; float: left; text-align: right; line-height: 25px; font-size: 8pt; color: #ffffff; margin-right: 0.5em; display: block; font-weight: bold;}

.msgtype { padding-top: 3px; padding-bottom: 3px;}
.msgtype  label {float: left; margin-left: 1em; }
.msgtype  legend { font-weight: bold;  }
.msgtype fieldset { border: 0;   width: 400px;}
.msgtype input {float: left; clear: both; margin-left: 60px;}


.permissions {float: left; width: 100%;}
.permissionsinput { padding-top: 3px; padding-bottom: 3px; width: 650px;}
.permissionsinput  label { width: 600px;  padding-left: 10px; font-size: 8pt;  text-align: left; display: block; padding-top: 10px; }
.permissionsinput  legend { font-weight: bold; }
.permissionsinput  fieldset { border: 0; border-top: 1px solid #A0A0A0; }
.permissionsinput  input { float: right;  }


.variablewidthinput { padding-top: 3px; padding-bottom: 3px;}
.variablewidthinput label { float: left; text-align: left; margin-right: 0.5em; display: block; }

.timetableinput { padding-bottom: 3px;}
.timetableinput label { width: 12em; float: left; text-align: left; margin-right: 0.5em; display: block; }

/* custom base styles */
.bold { font-weight: bold; }
.italic { font-style: italic; }

/* container */
#container { display: block; width: 980px; margin: auto; border-top: 5px solid #cccccc; padding-bottom: 5px; background-color: #ffffff;}
#login-container { display: block; width: 480px; padding-top: 80px; margin: auto; }

/* header */
#header { display: block; width: 980px; height: 145px; padding-top: 5px; background: url(../images/branches_logo.gif) top right no-repeat; background-color: #ffffff;}
#versionnumber { float: left; width: 968px; padding-right: 12px; height: 20px; line-height: 20px; text-align: right; font-size: 7pt; color: #000000; }
#headersection { display: block; float: left ; width: 595px; padding-left: 5px; padding-top: 100px; height: 25px; text-align:left; font-size: 12pt; font-weight: bold; color: #000000;}
#headerlogo { display: block; float: left ; width: 65px; padding-left: 15px; padding-top: 60px; height: 65px; text-align:left; }
#headeruser { display: block; float: right ; width: 288px; padding-right: 12px; padding-top: 85px; height: 20px; line-height: 20px; text-align:right; font-size: 8pt;}
#headertext { display: block; float: right ; width: 288px; padding-right: 12px; padding-top: 0px; height: 20px; line-height: 20px; text-align:right; font-size: 8pt;}


/* login */

#login .submit {  float: left; width: 160px;  padding-right: 45px; text-align: right; height: 50px; padding-top: 15px;}
#login .forgotten {  float: left;  width: 205; height: 50px; line-height: 20px; padding-top: 15px; }




/* content */

#navigation { float: left; width: 170px; padding-left: 15px; padding-right: 15px; margin: 0; padding-top: 20px; font: 12px/18px "Lucida Grande", Verdana, Geneva, Arial, Helvetica, sans-serif; background-color: #ffffff; }

#navigation a { display: block; width: 140px; height: 30px; padding-left: 30px; font-size: 8pt; font-weight: bold; line-height: 30px; text-decoration: none; border-top: 1px solid #A0A0A0; }
#navigation .endholder { display: block; width: 140px; height: 30px; padding-left: 30px; font-size: 8pt; font-weight: bold; line-height: 30px; text-decoration: none; border-top: 1px solid #A0A0A0; }
#navigation a:link { background-color: #FFFFFF; color: #003366; }
#navigation a:visited { background-color: #FFFFFF; color: #003366; }
#navigation a:hover { background-color: #F0F0F0; color:#003366; }
#navigation .current { display: block; width: 197px; }
#navigation .current a { display: block; width: 140px; height: 30px; padding-left: 30px; background-color: #B0B0B0; color: #FFFFFF; font-size: 8pt; font-weight: bold; line-height: 30px; text-decoration: none; border-top: 1px solid #A0A0A0; }
#navigation .current a:link { background-color: #0099CC; color: #FFFFFF; }
#navigation .current a:visited { background-color: #77AAFF; color: #FFFFFF; }



#content { float: right; width: 770px; padding-top: 10px; padding-left: 0px; padding-right: 10px; background-color: #ffffff; }

#login-screen-box { float: left; width: 410px; padding-top: 110px; padding-left: 70px; padding-right: 0px; background: url(../images/branches_logo.gif) 30px 10px no-repeat; background-color: #ffffff;}
#login-title {float: left; position: relative; width: 300px; height: 80px;  }
#login-title-actual { position: absolute; bottom: 25px; width: 295px; text-align: right; font-size: 16pt; font-weight: bold; font-style: italic; color: #000000;}
#login-icon { float: left; width: 110px; height: 80px; }

#footer { float: left; width: 960px; padding-left: 10px; padding-right: 10px; padding-top: 10px; padding-bottom: 10px; font-size: 7pt; background-color: #ffffff; text-align: right; height: 35px; border-bottom: solid 5px #cccccc; border-top: solid 2px #aaaaaa;}
#footer a:link { color: #999999; text-decoration: underline; }
#footer a:visited { color: #999999; text-decoration: underline; }
#footer a:hover { color: #666666; text-decoration: underline; }