body {
        margin: 0;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 90%;
        background: #fff url('../images/site/back.gif') repeat;
}

#container {
        color: #000;
        line-height: 1.1;   /* Fixes the peekaboo bug! */
}

img {
        border: none;
}

hr {
        color: #637173;   /*Grey */
}

.hoverfix {
	font-size: 1px;
	height: 1px;
}

#skipmenu, .hidden {
        position: absolute;
	left: -2000px;
	width: 1900px;
	padding: 0;
	margin: 0;
}

#header {
        padding: 5px;
        margin: 0;
        background: #fff url('../images/site/back.gif') repeat;
        font-weight: bold;
}
#header h1 {
        margin: 0 0 0.2em 0;
        padding: 0;
        color: #4B7395;
}
#header p {
        margin: 0;
        padding: 0;
}

/* #left is where the menu sites, and information about who you are currently logged in as */
#left   {
        background: #8DC63F;
        padding: 0;
        margin: 0.2em 0 0.2em 0;
        color: #fff;
        width: 100%;
        text-align: left;
        font-size: 90%;
        float: left;
}

/* #left .menu is the menu is */
#left .menu {
        padding-top: 0;
}
#left h2 {
        color: #fff;
        font-size: 120%;
        font-weight: bold;
        padding: 3px 3px 3px 20px;
        margin: 0.5em 0 0 0;
}
#left .menu ul {
        font-size: 90%;
        list-style-type: none;
        margin: 0;
        padding: 0;
}
#left .menu li {
        font-weight: bold;
        margin: 0;
        padding: 0;
        float: left;
        display: inline;
}
#left .menu li.currentnone {
        color: #fff;
        background: #8DC63F url('../images/site/ArrowOn.gif') no-repeat 0 40%;
        padding: 5px 23px 5px 22px;
        display: block;
}
#left .menu li a {
        padding: 5px 23px 5px 22px;
        color: #fff;
        display: block;
        text-decoration: none;
        background: #8DC63F url('../images/site/ArrowOff.gif') no-repeat 0 40%;
}

#left .menu  li a:hover, #left .menu  li a:active {
        color: #61A71E;
        text-decoration: none;
        background: #8DC63F url('../images/site/ArrowOn.gif') no-repeat 0 40%;
}
#left .menu li.current a {
        padding: 5px 23px 5px 22px;
        color: #61A71E;
        display: block;
        text-decoration: none;
        background: #8DC63F url('../images/site/ArrowOn.gif') no-repeat 0 40%;
}
#left .menu  li.current a:hover, #left .menu.current  li a:active {
        color: #61A71E;
        text-decoration: none;
        background: #8DC63F url('../images/site/ArrowOn.gif') no-repeat 0 40%;
}

#left p {
        margin: 0;
        padding: 3px;
        font-size: 90%;
}


/* #content is where the content goes */
#content {
        padding: 0.1em 0 1em 0;
        font-size: 85%;
        margin: 0 5px 0 5px;
        clear: both;
}

#content h1 {
        font-size: 180%;
        margin: 0;
        color:#4B7395;
        text-align:left;
        padding-top: 10px;
}
#content h2 {
        font-size: 130%;
        margin: 0.7em 0 0.3em 0;
        color:#4B7395;
        text-align:left;
}

#content h3 {
        font-size: 115%;
        margin: 0.7em 0 0.3em 0;
}

#content p {
        line-height: 1.2;
        margin: 0.7em 0.3em 0.7em 0;
}

#content a {
        color: #066faf;
        text-decoration: none;
}
#content a:hover {
        color: #000;
        text-decoration: underline;
}


/* #footer is the bit at the bottom */
#footer {
        font-size: 80%;
        clear: both;
        margin: 0;
        padding: 0 0 0 10px;
        color: #333;
 /*       background: #fff url('../images/site/footerlogo.gif') no-repeat 15px 50%;    */
        color: #000;
        height:35px;
        text-align: left;
        /*border-top: 1px solid #8DC63F;      */
}

#footer ul {
        display: inline;
        text-align: left;
        padding: 0 10px 0 10px;
}

#footer li {
        display: inline;
        padding: 0 0 0 .6em;
        background: url('../images/site/barslice2.gif') repeat-y 0% 0;
}

#footer li.first {
        background: none;
        padding: 0 0.5em 0 0;
        line-height:30px;
}
#footer li a {
        color: #000;
	text-decoration: none;
}
#footer li a:hover {
        color: #8DC63F;
        text-decoration: underline;
}

/* #ErrorBox is where system error messages are shown. Should never really appear (but does a lot when testing ;) ) */
#ErrorBox {
        border: 1px solid #8DC63F;
        background: #fff;
        margin: 4em auto;
        display: block;
        text-align: left;
        width: auto;
        font-size: 90%
}

#ErrorBox h1 {
        background: #00498D;
        color: #fff;
        padding: 3px;
        margin: 3px;
        font-size: 110%
}
#ErrorBox p {
        padding: 0.2em 6px;
}
#ErrorBox p.continue {
}

/* .pagenav is a list of "pages" where a list exapnds into more than one page */
.pagenav {
        border-top: 1px solid #637173;
        border-bottom: 1px solid #637173;
        margin: 0.5em 0 1em 0;
        padding: 2px;
        font-size: 90%;
        background: #ddd;
}

.pagenav h2 {
        font-weight: normal;
        display: inline;
}

.pagenav ul {
        font-size: 120%;
        display: inline;
        margin: 0 0 0 0.5em;
        padding: 0;
}

.pagenav li {
        display: inline;
        padding: 0 0 0 12px;
        background: url('../images/site/Diamond.gif') no-repeat 0 50%;
}

.pagenav li.first {
        background: url('');
        padding-left: 0;
}

.pagenav li a {
        color: #007993;
        text-decoration: none;

}

.pagenav li a:hover {
        color: #000;
        text-decoration: underline;
}

#content fieldset {
        margin: 0.5em 0;
        padding-left: 35px;
}

#content fieldset.invisible {
        border: none;
        margin: 0;
        padding: 0;
}

#content fieldset p {
        margin: 0 0 0.25em 0;
        display: block;
}

#content fieldset label {
        width: 10em;
        text-align: right;
        margin: 0 0.5em;
        display: block;
        float: left;
        white-space: nowrap;
}


#content fieldset span.labelextra {
        padding-left: 0.5em;
        font-size: 90%;
}

#content fieldset p.buttons {
        margin: 0.8em 0 1em 5em;
}

#content fieldset p.buttons input {
        margin: 0 0.5em;
}

#content fieldset p.radiooptions {
        margin: 0 0.5em 0 0;
}

#content fieldset fieldset.radiooptions p {
        margin: 0;
}

#content fieldset fieldset.radiooptions {
        border: none;
        padding-bottom: 0;
        display: inline;
}
#content fieldset fieldset.radiooptions label {
        display: inline;
        float: none;
        clear: none;
        padding: 0 1em 0 0;
}

#content fieldset fieldset.radiooptions input {
        display: inline;
        float: none;
        clear: none;
        padding: 0 1em 0 0;
}


#content fieldset div.radiolabelextra {
        display: inline;
        font-size: 80%;
        padding-left: 1em;
}


/*

#content fieldset fieldset {
        border: none;
        margin: 0;
        padding: 0;
}


#content fieldset fieldset label {
        padding: 0 1em 0 0;
        width: auto;
}        */
#content fieldset input.checkbox {
        clear: none;
        display: inline;
}


input.VeryShortInput {
        width: 2em;
}

input.ShortInput {
        width: 7em;
}

input.MediumInput {
        width: 12em;
}

input.LongInput {
        width: 17em;
}

input.VeryLongInput {
        width: 22em;
}

input.full {
        width: 98%;
}

#content fieldset label.left {
        text-align: left;
}


#content fieldset p label.full, #content fieldset p label.lmceEditor, #content fieldset p label.fulllow {
        margin: 0.5em 0;
        text-align: left;
        width: 98%;
}

#content textarea.fulllow {
        clear: left;
        width: 98%;
        height: 6em;
}

#content object.full, #content textarea.mceEditor, #content textarea.full {
        clear: left;
        width: 99%;
        height: 250px;
}

#content object.FullWidthHalfHeightBox {
        width: 98%;
        height: 120px;
}

#content textarea.FullWidthBox {
        width: 22em;
        height: 200px;
}

#content textarea.FullWidthHalfHeightBox {
        width: 22em;
        height: 100px;

}


/* Table - you know what one of those is ;) */
table {
	border-collapse: collapse;
        border: 1px solid #000;
        clear: none;
        margin: 0.5em 0;
}

caption {
	text-align: left;
	margin: 0 0 .2em 0;
	font-weight: bold;
	font-size: 120%;
}

thead th {
        background: #4B7395;
	font-weight: bold;
        color: #fff;
        font-size: 105%;
        border-bottom: 1px solid #000;
}

th {
        font-weight: bold;
}

th, td {
        padding: .3em .6em;
        border-right:1px solid #999;
        border-bottom:1px dashed #999;
}

code {
        font: 120% courier, monospace;
}

blockquote {
        margin: 1em;
	padding: 1em;
        border: 1px solid #5E5E5E;
        background: #FFFBF7;
        clear: both;
}

blockquote p {
        margin-top: 0;
}

blockquote p.source {
	margin-bottom: 0;
	text-align: right;
	font-size: 90%;
	font-style: italic;
}


/* This shows error messages - I usualy put in a box with a background graphic of an red exlimation mark / stop sign */
p.error {
        color: red;
        font-weight: bold;
}

/* This shows info messages - I usualy put in a box with a background graphic of an blue exlimation mark */
p.info {
        font-weight: bold;
}


/* #toplist is a class to modify a form display on the top of a browser list.  */
#content .toplist fieldset {
        border: none;
        margin: 0;
        background: #eee;
}
#content .toplist label {
        float: left;
        text-align: left;
        margin: 0 0.5em;
        width: auto;
        font-weight: bold;
        font-size: 110%;
}
#content .toplist select, #content .toplist input {
        float: left;
        text-align: left;
        margin: 0 0.5em;
}

#content .cell_Red{background-color: #FF4040;}
#content .cell_Yellow{background-color: #FFFF40;}
#content .cell_Green{background-color: #40FF40;}
#content .cell_Aqua{background-color: #40FFFF;}
#content .cell_Blue{background-color: #4040FF;}
#content .cell_Purple{background-color: #FF40FF;}
#content .cell_Grey{background-color: #C0C0C0;}
#content .cell_Olive{background-color: #808000;}
#content .cell_Pink{background-color: #FFC0FF;}
#content .cell_Salmon{background-color: #FFD5C1;}
#content .cell_Violet{background-color: #D0C1FF;}

#content td.unavail {
        background-color: #C0C0C0;
}
#content td.mine {
        border: 2px solid black;
}
#content td.mineunavail {
        background-color: #C0C0C0;
        border: 2px solid black;
}

#content p.shiftid {
        font-size: 80%;
        padding: 3px 0 0 0;
        margin: 0;
        text-align: center;
}
#content p.shiftidcurrent {
        font-size: 80%;
        padding: 3px 0 0 0;
        margin: 0;
        text-align: center;
        background: red;
        color: #fff;
}
#content p.availindis {
        font-size: 80%;
        margin: 0;
        text-align: center;
        color: gray;
}
#content p.availin {
        font-size: 80%;
        margin: 0;
        text-align: center;
}
#content p.avail input {
        padding: 0;
        margin: 0;
        vertical-align: middle;
}
#content div.TimeZone {
        float: right;
        margin: 5px;
        padding: 0.5em;
        background: #E8F4D6;
        border: 1px solid #C6E49A;
}
#content div.TimeZone div.editmode {
        border-top: 2px solid #C6E49A;
        text-align: center;
        margin: 1em auto;
        padding: 1em 0 0 0;
        display: block;
}

div.shift, div.shift_mine, div.shift_mineunavail, div.shift_unavail, div.shift_none {
        margin:0;
        padding: 5px;
        text-align: center;
        font-weight: bold;
border-bottom: 1px dashed gray;
}
div.shift_mine { background-color: #80FF80; }
div.shift_mineunavail { background-color: #FF8080; }
div.shift_unavail { background-color: #C0C0FF; }
div.shift { background-color: #C0FFC0; }
div.shift_none { background-color: #FFF; }

div.schedtable td {
        padding: 0;
}
table input.smallbutton {
        font-size: 80%;
        padding: 0px;
}

div.ShiftPicker{
  float: left;
  margin: 0 1em 0 1em;
  width: 99%;
}
div.ShiftPicker h2{
  margin: 0;
}
div.ShiftPicker select.multiple {
  width: 15em;
  height: 8em;
}
div.ShiftPicker div.Available {
  display: inline;
  float: left;
  margin: 0 0 0 1em;
  padding: 0
}
div.ShiftPicker h3 {
  text-align: center;
  margin-bottom: 0;
}
div.ShiftPicker div.PickerMiddle {
  display: inline;
  float: left;
  margin: 2.5em 1em 0 1em;
  padding: 0;
  text-align: center;
}
div.ShiftPicker div.PickerMiddle input {
  width: 5em;
}
div.ShiftPicker div.Rostered {
  float: left;
  display: inline;
  margin: 0;
  padding: 0
}

.inline {
        display: inline;
}

#content ul {
        margin-top: 0;
}
#content li {
        margin: 0.3em 0;
}