/* CMS CSS Document */

body {
    font-size: 100% ;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 30px 20px 50px;
    text-align: center; /* this centers the container in IE 5* browsers.  */
    color: #000;
}

img { border: 0; }
input#remember_me,
div.greycontent_wrapper input.checkbox { width: auto; }

div.hold {
    width: 100%;
    background-color: #FFF;
    margin: 0 auto;
    border: 1px solid #FFF;
    text-align: left;
    min-width: 800px;
}

div.header {
    width: 100%;
    position: relative;
    float: left;
    margin: 0;
    background-repeat: repeat-x;
    background-color: #333;
    padding: 20px 0 0;
}

div.preferences {
    position: relative;
    display: block;
    width: 320px;
    float: right;
    margin: 15px 20px 0 0;
}

div.logo {
    position: relative;
    display: inline;
    margin: 0 0 35px 30px;
    width: 420px;
    height: 40px;
    float: left;
}

div.logo img { display: block; }

div.preferences p {
    font-size: 70%;
    line-height: 15px;
    font-weight: normal;
    margin: 0;
    padding: 0;
    text-align: right;
}

div.preferences p a:link, div.preferences p a:visited {
    color: #FFF;
    font-weight: bold;
    padding: 0 10px;
}

div.preferences p a:hover { color: #DDD; }

div.preferences label {
    color: #FFF;
    line-height: 15px;
    font-weight: bold;
    margin: 0;
    padding: 0;
    text-align: right;
}

div.preferences form {
    margin: 15px 0 0 0;
    padding: 0;
}

/* TOP LEVEL NAVIGATION */

/* UL STYLE FOR TOP NAV */
ul.toplevel {
    list-style-type: none;
    margin: 0 0 0 30px;
    padding: 0;
}

/* LI STYLE FOR TOP NAV LINK OFF */
ul.toplevel li {
    display: inline;
    float: left;
    margin: 7px 5px 0 0;
    font-size: 70%;
    font-weight: bold;
    line-height: 11px;
}

ul.toplevel li a:link, ul.toplevel li a:visited {
    display: block;
    padding: 5px 20px;
    margin: 0;
    text-decoration: none;
}

ul.toplevel li a:hover {
    text-decoration: none;
}

/* LI STYLE FOR TOP NAV LINK ON */
ul.toplevel li.on {
    display: inline;
    float: left;
    border-bottom: 0;
    margin: 4px 5px 0 0;
    font-size: 70%;
    font-weight: bold;
    line-height: 11px;
}

ul.toplevel li.on a:link, ul.toplevel li.on a:visited {
    display: block;
    padding: 7px 20px;
    text-decoration: none;
}

ul.toplevel li.on a:hover {
    display: block;
    text-decoration: none;
}

/* SECOND LEVEL NAVIGATION */
ul.secondlevel {
    list-style-type: none;
    margin: 0 0 0 40px;
    padding: 0 0 30px 0;
}

/* SECOND LEVEL NAVIGATION OFF */
ul.secondlevel li {
    display: inline;
    float: left;
    margin: 9px 0 0 0;
    padding: 0;
    font-size: 70%;
    font-weight: normal;
    line-height: 11px;
}

ul.secondlevel li a:link, ul.secondlevel li a:visited {
    display: block;
    padding: 0px 20px;
    text-decoration: none;
}

ul.secondlevel li a:hover {
    text-decoration: none;
}

/* SECOND LEVEL NAVIGATION ON */
ul.secondlevel li.on a {
    font-weight: bold;
}

ul.secondlevel li.last {
    border-right: 0;
}

/* PAGE HELP */
div#help_wrapper {
    position: relative;
    display: none; /* Hide help by default */
    float: left;
    background-color: #EEE;
    padding: 15px 60px 12px 60px;
}

div.help p {
    color: #333;
    font-size: 70%;
    line-height: 15px;
    font-weight: normal;
    margin: 0;
    padding: 0;
}

img.icon_help {
    float: right;
    display: block;
    border: 0;
    margin: 0 0 0 10px
}

/* PAGE CONTENT */
div.contentholder {
    position: relative;
    display: block;
    float: left;
    background-color: #FFF;
    width: 100%;
    padding: 0 0 20px 0; /* Dont change this!! */
    text-align: left;
}

div.contentholder h1 {
    color: #333;
    font-size: 100%;
    line-height: 15px;
    font-weight: bold;
    margin: 20px 0 20px 60px;
    padding: 0;
}

div.contentholder p.header {
    font-size: 75%;
    line-height: 24px;
    font-weight: bold;
    margin: 0 40px;
    padding: 0 0 0 20px;
}


div.contentholder p.header img {
    float: right;
    display: inline;
    border: 0px;
    margin: 4px 22px 0 0;
}

div.contentholder p.header a:link.message, div.contentholder p.header a:visited.message {
    color: #FFF;
    text-decoration: none;
    margin: 0 20px 0 0;
}

div.contentholder p.header a:hover.message { text-decoration: underline; }

div.greycontent_wrapper {
    margin: 0 40px 20px 40px;
    padding: 20px 0 0 0;
    background-color: #EEE;
    overflow: hidden;
}

div.greycontent_wrapper p {
    color: #333;
    font-size: 70%;
    line-height: 15px;
    font-weight: normal;
    margin: 0 0 15px;
    padding: 0;
}

div.greycontent_wrapper p.key {
    color: #333;
    font-size: 70%;
    line-height: 15px;
    font-weight: normal;
    margin: 0 0 15px;
    padding: 0;
    vertical-align: middle;
}

div.greycontent_wrapper p.key span {
    background-color: #F6F6F6;
    padding: 7px;
    margin: 0;
}

div.greycontent_wrapper p.key img { vertical-align: middle; }

div.greycontent_wrapper a {
    color: #333;
    font-weight: bold;
    text-decoration: underline;
}

label { font-weight: bold; }

div.greycontent_wrapper input, textarea {
    font-family: arial;
    font-size: 100%;
    padding: 2px;
    border: 1px solid #CCC;
    width: 310px;/* carefull - this sets ALL the inputs in the wrapper div (overide with style="") */
    margin: 0;
}

div.greycontent_wrapper input.narrow { width: 50px; }
div.greycontent_wrapper input.short { width: 145px; }


div.greycontent_wrapper input.button {
    font-family: arial;
    font-size: 100%;
    padding: 1px 8px 1px 8px;
    border: 2px double #999;
    margin: 0;
    width: 80px;
}

div.greycontent_wrapper input.radio     {
    font-family: arial;
    font-size: 100%;
    width: auto;
    height: auto;
    padding: 0;
    border: 0;
    margin: 0;
}

div.greycontent_wrapper button.button {
    width: 120px;
    border: 2px double #999;
    font-size: 100%;
}

.radio {
    font-size: 100%;
    width: auto;
    height: auto;
    padding: 0;
    border: 0;
    margin: 0;
}

div.greycontent_wrapper input.threecol, textarea.threecol {
    font-family: arial;
    font-size: 100%;
    padding: 2px;
    border: 1px solid #CCC;
    width: 200px;/* carefull - this sets ALL the inputs in the 3 col wrapper div (overide with style="") */
    margin: 0;
}

div.content_1_column {
    width: 96%;
    display: inline;
    float: left;
    margin: 0;
    padding: 0 0 0 2%;
}

div.content_1_column h2, div.content_2_column h2 {
    color: #333;
    font-size: 90%;
    line-height: 15px;
    font-weight: bold;
    margin: 0 0 10px 0;
    padding: 0;
}

span.label_spacer { margin-right: 120px; }

div.form_left {
    float: left;
    width: 180px;
    height: 30px;
}

div.form_left label {
    color: #333;
    font-size: 80%;
}

div.form_right {
    float: left;
    height: 30px;
    color: #333;
    font-size: 80%;
}

div.content_2_column {
    width: 47%;
    display: inline;
    float: left;
    margin: 0;
    padding: 0 0 0 2%;
}

div.content_3_column {
    width: 31%;
    display: inline;
    float: left;
    margin: 0;
    padding: 0 0 0 2%;
}

/*** Associated images ***/
.associated_image {
    float: left;
    width: 200px;
    padding: 10px;
    margin: 10px 10px 0 0;
    background: #CCC;
}

.greycontent_wrapper .associated_image p { margin-bottom: 0; }

/* PAGE LISTS */
/************************************
*  Spacing between the LI elements  *
*  is controlled by padding on the  *
*  images.                          *
*  Due to an IE6 issue.             *
************************************/
ul.tree {
    list-style-type: none;
    margin: 0;
    padding: 0;
    font-size: 70%;
    overflow: hidden;
}

ul.tree ul { font-size: 100%; overflow: hidden; }

ul.tree img {
    border: 0;
    vertical-align: middle;
    margin: 0 6px 0 0;
    padding: 5px 0;
    display: inline;
}

ul.tree li {
    color: #333;
    font-size: 100%;
    font-weight: normal;
    margin: 0;
    padding: 0 0 0 20px;
    border-top: 4px solid #EEE;
    _overflow: hidden;
}

ul.sortable li { cursor: move; }
ul.sortable li li { background-color: #BBB; }
ul.sortable li li li { background-color: #DDD; }

ul.sortable li a:link, ul.sortable li a:visited { text-decoration: none; }
ul.sortable li a:hover { text-decoration: underline; }

/* UNDRAGABLE UL */
ul#sortable-categories-nodrag {
    list-style-type: none;
    margin: 10px 0px;
    padding: 0;
    font-size: 70%
}

ul#sortable-categories-nodrag li {
    color: #333;
    font-size: 100%;
    line-height: 16px;
    font-weight: normal;
    margin: 0;
    padding: 8px 0 8px 10px;
    background-color: #DDD;
}

ul#sortable-categories-nodrag li img {
    border: 0;
    vertical-align: middle;
    margin: -2px 6px 0 0;
}

/* Standard table */
table.cms {
    width: 100%;
    font-size: 70%;
    margin: 0 0 20px 0;
}

table.cms th {
    color: #FFF;
    text-align: left;
    padding: 5px 5px 5px 10px;
}

table.cms td {
    color: #333;
    text-align: left;
    padding: 5px 5px 5px 10px;
    vertical-align: middle;
}

table.cms td a { text-decoration: none; }
table.cms td img { vertical-align: middle; }

table.cms td img {
    border: 0;
    margin: 0 5px 0 0;
}

/*** Widgets ***/
table.widgets th.name { width: 80% }
table.widgets th.active {
    width: 10%;
    text-align: center;
}
table.widgets th.options {
    width: 10%;
    text-align: center;
}

/*** Header images ***/
table.header_images th.page_title { width: 75%; }
table.header_images th.active { width: 25%; }

/*** News items ***/
table.news_items th.title { width: 20%; }
table.news_items th.date { width: 20%; }
table.news_items th.summary { width: 40%; }
table.news_items th.active { width: 5%; }
table.news_items th.options { width: 15%; }
table.news_items tr.expired td { color: #F00; }

/*** Case studies ***/
table.case_studies th.title { width: 45%; }
table.case_studies th.date { width: 25%; }
table.case_studies th.active { width: 10%; }
table.case_studies th.options { width: 20%; }

/*** Contacts ***/
table.contacts th.name { width: 20%; }
table.contacts th.position { width: 15%; }
table.contacts th.email_address { width: 15%; }
table.contacts th.telephone_number { width: 10%; }
table.contacts th.type { width: 10%; }
table.contacts th.received { width: 15%; }
table.contacts th.options { width: 15%; }

/*** Users ***/
table.users th.username { width: 20%; }
table.users th.name { width: 20%; }
table.users th.telephone { width: 20%; }
table.users th.email { width: 20%; }
table.users th.options { width: 20%; }

/*** Layouts ***/
table.layouts th.name { width: 55%; }
table.layouts th.slots { width: 25%; }
table.layouts th.options { width: 20%; }

/*** Sites ***/
table.sites th.name { width: 30%; }
table.sites th.urls { width: 50%; }
table.sites th.options { width: 20%; }

/*** Payroll Calendar Dates ***/
table.payroll_calendar_dates th.name { width: 20%; }
table.payroll_calendar_dates th.description { width: 40%; }
table.payroll_calendar_dates th.date { width: 20%; }
table.payroll_calendar_dates th.options { width: 20%; }

/*** Events ***/
table.events th.title { width: 25%; }
table.events th.location { width: 13%; }
table.events th.date { width: 15%; }
table.events th.sites { width: 17%; }
table.events th.options { width: 10%; }
table.events tr.expired td { color: #F00; }

/*** Downloads ***/
table.downloads th.title { width: 80%; }
table.downloads th.options { width: 20%; }

/*** Banner rotations ***/
table.banner_rotations th.title { width: 20%; }
table.banner_rotations th.summary { width: 65%; }
table.banner_rotations th.options { width: 15%; }

/*** Two column ***/
table.two_column th.options { width: 20%; }


/* FLASH MESSAGES */
div.notice {
    background-color: #DDD;
    margin: 0 0 20px 0;
    padding: 10px 10px 10px 40px;
    font-size: 75%;
    color: green;
}

div.error {
    background-color: #DDD;
    margin: 0 0 20px 0;
    padding: 10px 10px 10px 40px;
    font-size: 75%;
    color: #F00;
}

.clear {
    clear: both;
    font-size: 0em;
    width: 0px;
    height: 0px;
    line-height: 0px;
    overflow: hidden;
}

/* applying the wysiwyg style means tinymce will make the textarea a wysiwyg affair automatically:-) */
textarea.wysiwyg {
    width: 660px;
    height: 620px;
}

textarea.wysiwyg_small {
    width: 400px;
    height: 300px;
}


/* ERROR FORM FIELDS */
/* FLASH MESSAGES */
#error div.errorExplanation /* This is for error box on a page with the wysiwyg */ {
    background-color: #DDD;
    margin: 0 0 20px;
    padding: 10px;
}

div.errorExplanation {
    background-color: #DDD;
    margin: 0px 20px 20px 20px;
    padding: 10px;
}


div.errorExplanation h2 {
    color: #F00;
    font-size: 75%;
    line-height: 15px;
    font-weight: bold;
    margin: 0 0 10px 0;
    padding: 0;
    vertical-align: middle;
}

div.errorExplanation p {
    color: #333;
    font-size: 70%;
    line-height: 15px;
    font-weight: normal;
    margin: 0 0 10px;
    padding: 0;
    vertical-align: middle;
}

div.errorExplanation ul {
    color: #333;
    margin: 0;
    padding: 0 0 0 15px;
}

div.errorExplanation li {
    font-size: 70%;
}

div.fieldWithErrors {
    margin: -15px 0px 15px 0px; /* Bit of a hack but it works! */
    padding: 0;
}

div.fieldWithErrors input, div.fieldWithErrors textarea {
    font-family: arial;
    font-size: 70%;
    padding: 2px;
    border: 1px solid #F00;
    width: 310px;/* carefull - this sets ALL the inputs in the wrapper div (overide with style="") */
    margin: 0;
}


/* CROSS SELL */
div.auto_complete {
    width: 350px;
    background: #fff;
}

div.auto_complete ul {
    border: 1px solid #888;
    margin: 0;
    padding: 0;
    width: 100%;
    list-style-type: none;
}

div.auto_complete ul li {
    margin: 0;
    padding: 3px;
}

div.auto_complete ul li.selected {
    background-color: #FFB;
}

div.auto_complete ul strong.highlight {
    color: #800;
    margin:0;
    padding:0;
}


/**** PAGINATION ****/
div.pagination {
    padding: 0px 0px 5px 0px;
    margin: 0px;
    font-size: 75%;
}

div.pagination a {
    padding: 2px 5px 2px 5px;
    margin: 2px;
    /*border: 1px solid #9AC2B9; All pagination borders & backgrounds where this*/
    border: 1px solid #939598;
    text-decoration: none;
    color: #333;
}

div.pagination a:hover, div.pagination a:active {
    border: 1px solid #939598;
    color: #000;
}

div.pagination span.current {
    padding: 2px 5px;
    margin: 2px;
    border: 1px solid #939598;
    font-weight: bold;
    background-color: #939598;
    color: #FFF;
}

div.pagination span.disabled {
    padding: 2px 5px;
    margin: 2px;
    border: 1px solid #BBB;
    color: #BBB;
}

div.paginator_container {
    text-align: center;
    width: 99%;
    padding-bottom: 10px;
}


div.greycontent_wrapper .url p,
div.greycontent_wrapper .contact_solution p,
div.greycontent_wrapper .contact_address p,
div.greycontent_wrapper .how_did_you_hear p,
div.greycontent_wrapper .basis_for_enquiry p { margin: 0 0 5px; }

#permission_denied h2 {
    font-weight: normal;
    padding: 10px 0 15px;
}