/*=============================================================================
 * General
 *===========================================================================*/
 
html {
	height: 100%;
	font-size: 75%;
	margin: 0;
	padding: 0;
}

body {
	height: 100%;
	font: 1em verdana, sans-serif;
	margin: 0 5px;
	padding: 0;
	text-align: center;
	
}

a img {
	border: none;
}

a:hover {
	text-decoration: underline;
}

* html #page {
	height: 100%;
}

#page {
	min-height: 100%;
	width: 960px;
	font-size: 1em;
	padding: 0;
	text-align: left;
}

/**
 * 2em = 24px
 */
h1 {
	font: 2em helvetica;
	font-weight: bold;
	clear: left;
	margin: 1em 0 0.5em 0;
}

/**
 * 1.5em = 18px
 */
h2 {
	font-size: 1.5em;
}

/**
 * 1.3em = 16px
 */
h3, h4, h5, h6 {
	font-size: 1.3em;
}

/**
 * IE6 doesn't support max-width without the aid of javascript.
 */
#page,
#footer {
	/*width: expression(document.body.clientWidth < 702 ? "700px" : document.body.clientWidth > 952 ? "1190px" : "auto");*/
	min-width: 700px;
	margin: 0 auto;
}

/*=============================================================================
 * Accessibility (style selector links)
 *===========================================================================*/

#styles {
	float: left;
	width: 25%;
	line-height: 3em;
	padding: 0 0 0 0px;
	margin: 0;
}

#styles a {
	display: inline-block;
	padding: 0 0px;
	margin: 0 0 0 0px;
	border: 1px solid #000;
	font-weight: bolder;
	text-decoration: none;
	font-size: 1.6em;
}

#styles a.accessibility {
	border: none;
	font-size: 1.2em;
}

#style1 {
	background: #fff;
	color: #555;
	line-height: 1.2em;
}

#style2 {
	background: #CCFFCC;
	color: #000066;
	line-height: 1.2em;
}

#style3 {
	background: #FFFFCC;
	color: #990000;
	line-height: 1.2em;
}

#style4 {
	background: #000;
	color: #FFCC33;
	line-height: 1.2em;
}

/*=============================================================================
 * Header
 *===========================================================================*/

/* z-index ensures the clickable area covers the expected area */
#logo {
	float: left;
}

#logo * {
	margin: 0;
	padding: 0;
}

#logo a,
#body-portal #logo h1 {
	width: 83px;
	height: 108px;
	display: block;
	background: url(../images/logoWatford.jpg) 0 0 no-repeat;
	text-indent: -9999px;
	overflow: hidden;
}

/* position: relative allows the logo to be placed */
/* width: 100% fixes IE6 */
#header {
	position: relative;
	width: 950px;
}

#contact {
	line-height: 3em;
	width: 55%;
	float: right;
	margin: 0;
	padding: 0;
}

#callus {
	margin: 0 0 0 1em;
	background: url(../images/phone.gif) 0 10px no-repeat;
	padding: 0 0 0 28px;
}

#emailus {
	margin: 0;
	background: url(../images/email.gif) 0 10px no-repeat;
	padding: 0 0 0 28px;
}

#callus,
#emailus {
	font-weight: bold;
	font-size: 1.2em;
	float: right;
}

#headertop {
	position: relative;
	margin: 0;
	padding: 0 0 0 0;
}

#banner {
	margin: 0 0 0 0;
	background: url(/ext-static/header.jpg) left top no-repeat #FFF220;
	border: 1px solid #000;
	height: 108px;
	min-height: 108px;
	display: block;
}

#search {
	float: right;
	margin: 0;
	padding: 3px 2em 8px 8px;
	background: #FFF220;
	height: 80px;
	width: 220px;
	border-left: thin solid black;
	border-bottom: thin solid black;

}

#welcome {
	clear: both;
}

/*=============================================================================
 * Layout
 *===========================================================================*/

#col1, #col2, #col3, #col4, #colmid, #colleft, #col1-inline, #col2-inline, #colleft-inline {
	float: left;
}

#colmid,
#colleft,
#colleft-inline {
	width: 100%;
}

/**
 * left = 100% + center column left padding.
 */
#col1 {
	width: 500px;
	margin-right: 20px;
}

/**
 * left = right column width + (center column left and right padding) + (left column left padding).
 */
#col2, #col2-inline {
	width: 250px;
	margin: 30px 0 0 0;
	margin-right: 20px;
}

#body-portal #col2, #body-portal  #col2-inline {
      margin-top: 0px;
}

/**
 * left = (100% - left column width) + (center column left and right padding) + (left column left and right padding) + (right column left padding).
 */
#col3 {
	width: 156px;
}

/* reset for non-IE6 browsers */
html > body #col3 {
        left: 0px !important;
}

/**
 * right = width of right column.
 */
#colmid {
	right: 25%;
	top: 0;
}

/**
 * right = width of the middle column.
 */
#colleft {
	right: 60%;
}

.columns2 #colmid {
	right: 0;
}

.columns2 #colleft {
	right: 75%;
}

.columns2 #colleft-inline {
	right: 83.5%;
}

.columns2 #col1 {
	left: 100%;
	width: 72%;
}

.columns2 #col1-inline {
	left: 100%;
	width: 83%;
}

.columns2 #col2 {
	width: 23%;
	left: 0;
}

.columns2 #col2-inline {
	width: 14.5%;
	left: 0;
}

/**
 * padding-bottom creates space for footer to slide up into.
 */
#content {
	padding-bottom: 6em;
	width: 100%;
}

/*=============================================================================
 * Footer
 *
 * Uses the footerStickAlt technique.
 * clear:both on #footer prevents any column overlap that can push the content.
 *===========================================================================*/

#footer {
	background: url(../images/footer.png) 50% bottom no-repeat;
	clear: both;
	font-size: 1.3em;
	padding: 0.5em 0 15px 0;
	margin-top: -4.5em;
	text-align: center;
}

#footer ul {
	list-style-type: none;
	padding: 0;
	margin: 0 auto;
	overflow: auto;
	width: 550px;
}

#footer ul li {
	display: block;
	float: left;
	padding-top: 15px;
	width: 180px;
}

#footer ul li.copyright {
	font-size: small;
	width: 250px;
	padding-top: 20px;
}
#footer ul li.watfordForYou {
	padding-top: 0;
	width: 70px;
	margin: 0 30px 0 10px;
}
#footer ul li.watfordForYou a {
	background-image: url(../images/watfordForYou.jpg);
	background-repeat: no-repeat;
	display: block;
	float: left;
	height: 70px;
	width: 70px;
}
#footer ul li.directGov *  {
	float: left;
}


#footer a {
	font-weight: bold;

}

/*=============================================================================
 * Global atoz
 *===========================================================================*/

.atoz {
	margin-left: auto;
	margin-right: auto;
}

.atoz ul {
	list-style-type: none;
	border-right: none;
	height: 1.5em;
	line-height: 1.5em;
	padding: 0;
	margin: 12px 0 0 0;
}

.atoz ul li {
	float: left;
	text-align: center;
        margin-left: 4px;
	margin-right: 4px;
}

.atoz ul li.first {
	width: auto;
	margin-left: 0px;
}

.atoz ul li.first span {
	padding: 0 0.5em;
	font-weight: bold;
}

.atoz ul li a,
.atoz ul li span {
	border-right: none;
	display: block;
	text-decoration: none;
}

.atoz ul li.alpha a {
	width: 23px;
	height: 23px;
	background-image: url(../images/alphabet.png);
}
.atoz ul li.alpha a.b {
	background-position: -23px;
}
.atoz ul li.alpha a.c {
	background-position: -46px;
}
.atoz ul li.alpha a.d {
	background-position: -69px;
}
.atoz ul li.alpha a.e {
	background-position: -92px;
}
.atoz ul li.alpha a.f {
	background-position: -115px;
}
.atoz ul li.alpha a.g {
	background-position: -138px;
}
.atoz ul li.alpha a.h {
	background-position: -161px;
}
.atoz ul li.alpha a.i {
	background-position: -184px;
}
.atoz ul li.alpha a.j {
	background-position: -207px;
}
.atoz ul li.alpha a.k {
	background-position: -230px;
}
.atoz ul li.alpha a.l {
	background-position: -253px;
}
.atoz ul li.alpha a.m {
	background-position: -276px;
}
.atoz ul li.alpha a.n {
	background-position: -299px;
}
.atoz ul li.alpha a.o {
	background-position: -322px;
}
.atoz ul li.alpha a.p {
	background-position: -345px;
}
.atoz ul li.alpha a.q {
	background-position: -368px;
}
.atoz ul li.alpha a.r {
	background-position: -391px;
}
.atoz ul li.alpha a.s {
	background-position: -414px;
}
.atoz ul li.alpha a.t {
	background-position: -437px;
}
.atoz ul li.alpha a.u {
	background-position: -460px;
}
.atoz ul li.alpha a.v {
	background-position: -483px;
}
.atoz ul li.alpha a.w {
	background-position: -506px;
}
.atoz ul li.alpha a.x {
	background-position: -529px;
}
.atoz ul li.alpha a.y {
	background-position: -552px;
}
.atoz ul li.alpha a.z {
	background-position: -575px;
}
#body-atoz .item a, #body-atoz .item a:visited {
	line-height: 1.5em;
}

/*=============================================================================
 * Portal content directory
 *===========================================================================*/

#contentDirectory {
	border: 1px solid #ccc;
	margin: 20px 0 0 0;
	width: 670px;
}

#contentDirectory h2 {
	font-size: 1.1em;
	padding: 0.5em 0 0.5em 0.5em;
	margin: 0 0 1em 0;
	background: #FFFF00;
	color: #000000;
}

#contentDirectory h3 {
	margin: 0 0 0 0;

}

#contentDirectory ul {
	list-style-type: none;
}

#contentDirectory a {
	text-decoration: none;
}

/* Rows */
#contentDirectory .row {
	padding: 0;
	margin: 0;
	clear: left;
	padding: 1em 0 0 0;
}

/* Root categories */
#contentDirectory .row ul {
	width: 32%;
	margin: 0;
	padding: 0;
	float: left;
}

#contentDirectory .row ul.cdcol1,
#contentDirectory .row ul.cdcol4,
#contentDirectory .row ul.cdcol7 {
	padding-left: 10px;
}

/* Child categories */
#contentDirectory .row ul ul {
	float: none;
	width: auto;
}

#contentDirectory .row ul ul li {
	margin: 0.4em 0;
}

li.heading a {
	font-size: 1.2em;
	font-weight: bold;
}

#contentDirectory .row ul ul li a {
	font-size: 1em;
	font-weight: normal;
}
 

/*=============================================================================
 * News portlet
 *===========================================================================*/

/* width: 100% fixes IE6 */
#body-portal .news {
	border: 1px solid #ccc;
	width: 100%;
	min-height: 500px;
}

#body-portal table#newsheaders {
	height: 1.5em;
	width: 100%;
	margin: 0px;
	padding: 0px;
	border: 0px none;
}

#newsheaders td.newsheader {
	color:#000000;
	background:none repeat scroll 0 0 #0044EE;
	font-size:1.1em;
	font-weight: bold;
	margin:0px;
	width: 166px;
	padding:0.5em 0 0.5em 0.5em;
	border: 0px none;
	border-left: 1px solid grey;
	cursor: pointer;
}

#newsheaders td.newsheader a {
	color:#FFFFFF;
	text-decoration: none;
}
#newsheaders td.newsheader.inactive a {
	color:#333333;
	background-color: #10BAFC;
}

#newsheaders td.newsheader.inactive {
	color:#333333;
	background-color: #10BAFC;
}

#body-portal .news .story,
#body-portal .news .stories {
}

#body-portal .news  div.stories.inactive {
	display: none;
}

#body-portal .news .story h3 {
	margin: 0.5em 0 1em 0;
}

#body-portal .news .stories {
	border-left: 1px solid #ccc;
	margin-left: -1px;
	padding-bottom: 1em;
}

#body-portal .news .story .image {
	float: left;
	margin: 0 1em 0 0;
	width: 200px;
}

#body-portal .news .story .headline {
	font-weight: bold;
}

#body-portal .news .story .image img {
	border: 1px solid #ccc;
	border-top: 0;
	border-left: 0;
	width: 200px;
	height: 135px;
}

#body-portal .news .story .image .caption {
	font-style: italic;
	padding: 0.5em;
}

#body-portal .news p.morenews {
	text-align:right;
	padding-right: 3px;
}

#body-portal .news .imgcol {
	width: 50%;
	height: 100%;
}

#body-portal .news .story .content {
	margin: 0 5px;
}

#body-portal .news .story.noimage .content {
	margin-left: 5px;
}

#body-portal .news .stories ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#body-portal .news .stories ul li {
	margin: 2em 0 0 1em;
	padding: 0;
	clear:both;
}

#body-portal .news .stories ul li.first {
	margin-top: 1em;
}

#body-portal .news .stories ul li a {
	text-decoration: none;
}

#body-.portal .news .stories ul li a:hover {
	text-decoration: underline;
}

a.more {
	font-weight: bold;
	text-decoration: none;
	margin: 0 1em 0.5em 0;
}

a.more:hover {
	text-decoration: underline;
}

/*=============================================================================
 * Do it online portlet
 *===========================================================================*/
 
/* width: 100% fixes IE6 */
.doitonline {
	border: 1px solid #ccc;
	margin: 0 0 0 0;
	width: 100%;
}

.doitonline h2 {
	font-size: 1.1em;
	padding: 0.5em 0 0.5em 0.5em;
	margin: 0 0 1em 0;
	background: #ed3540;
	color: #000000;
}

.doitonline div.header {
	font-weight: bold;
	margin: 0 0 0 0;

}

.doitonline ul {
	list-style-type: none;
	margin: 0 0 1em 0.5em;
	padding: 0;
	font-size: 1.1em;
}

.doitonline ul li {
	margin: 1em 0;
}

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

.doitonline ul li a:hover {
	text-decoration: underline;
}

/* width: 100% fixes IE6 */
#calendar {
	border: 1px solid #ccc;
	margin: 20px 0 0 0;
	width: 100%;
}

#calendar h2 {
	font-size: 1.1em;
	padding: 0.5em 0 0.5em 0.5em;
	margin: 0 0 0 0;
	background: #FFFF00;
	color: #000000;
}

/*=============================================================================
 * Top links portlet (top of right column)
 *===========================================================================*/

#toplinks {
}

#toplinks ul {
	margin: 12px 0 0 0;
	padding: 0;
}

#toplinks li {
	display: inline;
	border-right: 1px solid #ccc;
	padding: 0 3px;
}

#toplinks li.last {
	border-right: 0;
}

#toplinks a {
	text-decoration: none;
}

#toplink a:hover {
	text-decoration: underline;
}

/*=============================================================================
 * Links portlet
 *===========================================================================*/

.links ul {
	list-style-type: none;
	margin: 1em 0 0 0;
	padding: 0;
}

.links ul li {
	clear: left;
}

.links img {
	border: 1px solid #444;
	float: left;
	margin: 0 3px 1em 0;
}

.links a {
	text-decoration: none;
}

.links a:hover {
	text-decoration: underline;
}

/*=============================================================================
 * Left column categories
 *===========================================================================*/

.menu h3 {
	display: none;
}

.menu select {
	width: 95%;
	margin: 0 0 1em 0;
}

.menu ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.menu ul ul {
	margin: 0 0 0 12px;
}

.menu li {
	margin: 0.5em 0;
	padding: 0;
}

.menu .root {
	width: 100%;
	display: block;
	margin: 0 0 0.5em 0;
	padding: 0;
	font-weight: bold;
}

.menu a {
	text-decoration: none;
}

/* One of the categories the user has navigated into */
.menu .selecteditem {
	font-weight: bold;
}

.menu .selecteditem ul {
	font-weight: normal;
}

/* Category currently being viewed */
.menu .current {
	font-weight: bold;
	margin: 0.5em 0 0 0;
	padding: 0 0 0 12px;
	width: 100%;
}

.menu .current li {
	font-weight: normal;
}

/*=============================================================================
 * Downloads
 *===========================================================================*/

/* width: 95% fixes IE6 and IE7 */
.box1 {
	border: 1px solid #ccc;
	padding: 0.5em;
	margin: 1em 0;
	width: 95%;
}

.box1 h3 {
	font-size: 1.1em;
	margin: 0 0 1em 0;
}

.box1 ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.box1 ul li {
	background: url(../images/disc-blue.gif) 0 5px no-repeat;
	margin: 0.5em 0;
	padding: 0 0 0 12px;
}

.box1 a {
	text-decoration: none;
}

.box1 a:hover {
	text-decoration: underline;
}

.box1 p {
	margin: 0.1em 0;
}

/*=============================================================================
 * Misc
 *===========================================================================*/
 
.clear {
	clear: both;
	font-size: 1px;
	height: 1px;
}

.hidden {
	display: none;
}

.accesskeys,
.offscreen {
	position: absolute;
	left: -9999px;
}

.portalAdmin {
	clear: left;
	margin: 2em 0;
}

.itemContent img,
.features img {
	float: right;
	margin: 0 0 0.5em 0.5em;
}

.breadcrumb {
	margin: 2em 0 1em 0;
}

#govmetric {
	margin: 2em 0;
}

#govmetric input {
	margin: 0 1em 0 0;
}

.lead {
	font-weight: bold;
}

#emailus a,
#footer a
{
	text-decoration: none;
}

#styles a:hover.accessibility,
#emailus a:hover,
#footer a:hover
{
	text-decoration: underline;
}

.printthispage {
	margin: 1em 0;
	background: url(../images/printer.gif) 0 0 no-repeat;
	height: auto !important;
	height: 24px;
	line-height: 24px;
}

.printthispage a {
	margin-left: 30px;
}

#downloads a,
.internallinks a,
.externallinks a {
	font-weight: bold;
}

#downloads a:hover,
.internallinks a:hover,
.externallinks a:hover {
	text-decoration: none;
}

#col1 table {
	border-collapse: collapse;
	border: 1px solid #000;
	padding: 0;
	empty-cells: show;
}

#col1 td,
#col1 th {
	border: 1px solid #000;
	padding: 0.5em;
	text-align: left;
}

#col1 th {
	color: #444;
	background: #ddd;
}

#col1 form table,
#col1 form table td,
#col1 form table th {
	border: none;
	background: transparent;
}

.author p {
	background: url(../images/email.gif) 0 0 no-repeat;
	padding: 0 0 0 25px;
	line-height: 20px;
}

.addthis {
	margin: 5px 0 0 0;
	text-align: right;
	position: absolute;
	right: 0;
	top: 2.3em;
	z-index: 1000001;
}

.mpaSections,
.contents {
	padding: 0;
	float: left;
	width: auto;
}

body .mpaSections h3,
body .contents h3 {
	margin: 0;
	padding: 0.2em;
	border-bottom: 1px solid #ccc;
}

.mpaSections ul,
.contents ul {
	margin: 0.5em;
}

.printurl {
	display: none;
}

.jobSummary {
	margin: 0 0 2em 0;
}

.lookingfor {
	margin: 3em 0 1em 0;
	font-weight: bold;
	font-size: 1.2em;
	clear: both;
}

.itemContent p,
.itemContent ul li,
.item .lead p,
.mpaContent {
    line-height: 1.5em;
}

.imageLink, .socialmedia {
	border: 1px solid #ccc;
	margin-bottom: 10px;
	padding: 1px;
	width: 152px;
}
.imageLink p, .socialmedia p {
	margin-top: 6px;
	margin-bottom: 6px;
	text-align: center;
}

.socialmedia ul {
	list-style-type: none;
	padding-left: 0;
	margin-left: 10px;
	margin-right: 10px;
}
.socialmedia ul li p {
	text-align: center;
}
.imageLink a, .socialmedia ul li a {
	text-decoration: none;
}