/*
 generally I try and avoid global styles that are specific to one area,
 however, controlling styles using descendant selectors can't be done inline
 so they are included here, with a heading comment for what they apply to.
*/

/* all content */
body
{
	font: 13px/1.231 arial, helvetica, clean, sans-serif;
	background-color: #afb3b6;
	font-family: verdana,sans-serif;
	color: #373737;
}
.clearcontainers
{
	/* Use a break with this class to clear float containers */
	clear: both;
	height: 0;
	margin: 0;
	font-size: 1px;
	line-height: 0%;
}

a img
{
	/* turn off default border on image links. (we are unlikely to ever want it) */
	border: none;
}

/* reusable styles */

/* compact-input-box: search box with submit button embedded inside, and nice rounded borders */
.compact-input-box
{
	position: relative;
	background: url(../corporate/images/compact-input.png);
	background-repeat: no-repeat;
	width: 155px;
	height: 30px;
}

.compact-input-box .compact-input-input
{
	border: none;
	font-size: 12px;
	font-family: Arial,Helvetica,sans-serif;
	color: #969696;
	height: 24px;
	width: 115px;
	margin: 7px 0 0 4px;
	padding: 0;
	background: transparent;
}

.compact-input-box .compact-input-button
{
	position: absolute;
	top: 2px;
	left: 125px;
}

/* header styles */

#header
{
	background-position: left;
	background-repeat: no-repeat;
	height: 97px;
	position: relative;
}

#header #emapsiteLogo
{
	border: none;
	position: absolute;
	left: 20px;
	top: 22px;
}

#header #header-tools
{
	position: absolute;
	right: 0;
	top: 0;
}

#header #userboxWrapper
{
	position: absolute;
	top: 12px; /* line top of arrows image up with top of customer team text */
	right: 186px;
}

#header #contact-box
{
	color: #838383;
	font-size: 10px;
	position: absolute;
	right: 29px;
	top: 13px;
	white-space: nowrap;
}

#header #customerTeamPhone
{
	margin-top: 9px;
}

#header .mapshopImage
{
	height: 46px;
	position: absolute;
	right: 23px;
	top: 49px;
}

#UserDetailsBox #accountSummaryLink, #header #basketLink
{
	color: #373737;
	text-decoration: none;
}

#UserDetailsBox #loginLinksBox
{
	font-size: 11px;
	color: #373737;
	white-space: nowrap;
	text-align: right;
	line-height: 1.5em;
}

#UserDetailsBox #basketSummaryWrapper
{
	margin-right: 8px;
}

#UserDetailsBox #userDetailsWrapper
{
	font-size: 11px;
	color: #373737;
	white-space: nowrap;
	text-align: right;
	line-height: 1.5em;
}

/* page content styles */
#content h1
{
	background-image: url(../corporate/images/h1-bg.jpg);
	background-repeat: no-repeat;
	height: 28px;
	width: 560px;
	font-size: 14px;
	padding: 12px 0 0 10px;
	color: #820000;
	margin-bottom: 10px;
	margin-left: -10px; /* line text up with rest of page, allow background to extend past left of normal flow */
	margin-right: -10px;
}
/* header for page without eyecather*/
#longheader h1 
	{
	background-image: url(../corporate/images/h1-bg1.jpg);
	background-repeat:no-repeat;
	height: 28px;
	width: 740px;
	font-size: 14px;
	padding: 12px 0 0 10px;
	color: #820000;
	margin-bottom: 10px;
	margin-left: -10px;
  }
  #vlongheader h1 
	{
	background-image: url(../corporate/images/h1-bglong.jpg);
	background-repeat:no-repeat;
	height: 38px;
	width: 980px;
	font-size: 14px;
	padding: 12px 0 0 10px;
	color: #820000;
	margin-bottom: 10px;
	margin-left: -10px;
  }

#popupHeader
	{
	background-image: url(../corporate/images/h1-bg400.jpg);
	background-repeat:no-repeat;
	height: 28px;
	width: 395px;
	font-size: 14px;
	padding: 12px 0 0 10px;
	color: #820000;
	margin-bottom: 10px;
	margin-left: -5px;
	font-weight: bold;
  }

#content .h1-subheading
{
	font-size: 14px;
	color: #878787;
	font-weight: normal;
	margin: -15px 0 20px 12px;
}

#content p
{
	font-size: 12px;
	color: #373737;
	line-height: 150%;
	margin: 1em 0 0 0;
}

#content h2, legend
{
	font-size: 14px;
	background-image: url(../corporate/images/dot.jpg);
	background-repeat: repeat-x;
	background-position: bottom;
	margin: 1em 16px 0 -0.5em; /*-0.5em for IE*/
	padding: 0 0 5px 0;
	color:#373737;
}

#content .teal
{
	/* used for different style of h2 but could be used for anything */
	color: #00919E;
	font-size: 14px;
	font-weight: normal;
	margin: 0 0 5px 0;
}

#content div.section
{
	/* style to be used for a div containing all the content under a heading / sub heading. Indents content to match the heading. */
	margin-left: 1em;
	margin-right: 1em;
}

#content a
{
	color: #820000;
}

#content ul
{
	margin-top: 0;
}

#content ul li
{
	list-style-image: url(../corporate/images/bullet-teal.png);
	line-height: 150%;
}

.warningMessage
{
	border: 1px solid red;
	margin: 1em;
	padding: 1em;
}

.goodMessage
{
	border: 1px solid #0C0;
	margin: 1em;
	padding: 1em;
}

div.buy-link
{
	text-align: right;
}

div.buy-link a
{
	text-decoration: none;
}

div.buy-link img
{
	vertical-align: middle;
}

/* in page anchor navigation link styles */
p.top-link
{
	text-align: right;
}

.top-link a
{
	font-size: 0.75em;
}

/* top menu styles */

#menu
{
	font-size: 11.8px;
	margin: 0;
	background: #dfe1e0;
	color: Red; /*make missing links reaaaaly obvious */
}

#menu ul
{
	margin: 0;
	padding: 0;
}

#menu li
{
	list-style-type: none;
	margin: 0;
	padding: 0; /* ensure that floated menu item element appears on top of relative positioned flashyness, and not underneath. */
	z-index: 1; /* z-index set to prevent menus showing underneath the flashyness */
	position: relative; /* so that z-index has an effect */
}

#menu a
{
	color: #373737;
	text-decoration: none;
	margin: 0;
	padding: 5px 0 0 0;
}

#menu li.topLevelMenu
{
	float: left;
	border-right: 1px #fff solid;
	width: 135px;
	height: 27px;
}

#menu li.topLevelMenu > a
{
	/* centre align only the top menu items*/
	text-align: center;
	height: 22px; /* 27px minus 5px padding */
}

#menu li.topLevelMenu ul
{
	position: absolute;
	width: 137px; /* width of parent item plus two pixels for border */
	background: #dfe1e0;
	display: none; /* hide submenus until mouse is over top menu item */
	border-bottom: 1px solid #fff;
	margin-left: -1px; /* move left a pixel to compensate to line up border with parent item */
}

#menu li.topLevelMenu:hover ul
{
	/* show submenu when mouse */
	display: block;
}

#menu li.topLevelMenu li
{
	border: solid white;
	border-width: 1px 1px 0 1px;
}

#menu a
{
	display: block;
}

#menu li a:hover, #menu li a:focus, #menu li.current
{
	background: url(../corporate/images/bg-menu.jpg) repeat-x;
	color: #fff;
}
#menu li.current > a
{
	color: #fff;
}

#menu li.subMenuItem a:hover, #menu.subMenuItem li a:focus
{
	/* highlight menu item on mouse over */
	background: #878787;
}

#menu li.subMenuItem a
{
	text-align: left;
	background: #afb3b6;
	color: #fff;
	padding-left: 4px;
	padding-bottom: 4px;
	min-height: 18px; /* 27px minus total of 9px padding*/
}

/* section menu (menu on the left hand side of each page) */

ul#section-menu
{
	font-size: 12px;
	margin: 0;
	padding: 0;
	width: 140px;
	color: Red; /* make missing links obvious */
}

#section-menu li
{
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#section-menu a
{
	color: White;
	display: block; /* so that the width/height applies */
	background: #afb3b6;
	padding: 6px 4px 4px 6px;
	text-decoration: none;
	border-bottom: 1px solid white;
	min-height: 17px;
	
	
}

#section-menu li a.current
{
	/* highlight current item */
	background: #820000;
}

#section-menu li a:hover
{
	/* highlight menu item on mouse over */
	background: #878787;
}

/* inner menus level */

ul#section-menu ul
{
	position: relative;
	margin: 0;
	padding: 0;
}


#section-menu ul li a
{
	background: #fff;
	color: #B0B3B5;
	border-top: 1px #B0B3B5 solid;
	padding-top: 1px;
	padding-left:7px;
}
#section-menu ul li a:hover, #section-menu ul li a:focus
{
	color: #A2B100;
	background: #fff;
}
#section-menu ul li a.current
{
	color: Black;
	background: #fff;
	padding-left:7px;
}
/* Third level */
#section-menu ul ul li a
{
	border-bottom: 1px #fff solid;
	padding-top: 1px;
	background: #f0f0f0;
	color: #B0B3B5;	
	padding-left:13px;
}
#section-menu ul ul li a:hover, #section-menu ul li a:focus
{
	color: #000;
	background: #f0f0f0;
}
#section-menu ul ul li a.current
{
	color: #000;
	background: #f0f0f0;
	padding-left:13px;
}

/* partner list */

ul#our_partners
{
	list-style: none outside;
	padding: 0;
	margin: 0;
}

/* footer styles */
#footer p, #footer li
{
	/* put all footer elements on one line */
	float: left;
}

#footer ul
{
	/* put all footer elements on one line */
	float: right;
	width:385px;
}

#footer li
{
	/* ensure footer list items don't overlap */
	margin-left: 2em;
}

#footer a
{
	color: white;
}

/* 2 or 3 column layout for page content */
#content-layout-table
{
	width: 100%;
	background-color: White;
}

#content-layout-table > tbody > tr > td
{
	vertical-align: top;
	text-align: left;
	padding-bottom: 10px;
}

td.sectionMenuCell
{
	width: 160px;
	padding-top: 23px;
}

.client-logo /* logo shown above section menu */
{
	margin: 4px 4px 4px 20px;
	max-width:140px;
}

div#sectionMenuWrapper
{
	margin: 0 0 0 20px;
}

div#partnersWrapper
{
	margin: 23px 0 0 20px;
}

div#content
{
	margin: 23px 20px 2em 20px;
}

td.EyeCathcherCell /* not using ID as is server side control so id can change */
{
	width: 200px;
}

div#footer
{
	margin: 0 auto;
	width: 945px;
	height: 20px;
	padding: 0 30px 15px 30px;
	font-size: 11px; color: #fff;
}

div#under-footer
{
	clear: both;
}

/* eye catcher styles */
#news-feed a
{
	/* article summary links */
	color: #373737;
	font-size: 12px;
}

p.caption
{
	font-style: italic;
	font-size: 12px;
	padding: 0 0 25px 0;
}

.tableWrapper
{
	border: #eee 1px solid;
	padding: 0 0 10px;
	padding-left:10px;
	margin: 1em 0;
	margin-left:-9px;
  width:740px;
	
	
	
}


.tableWrapper h1
{
	margin-top: 0; /* prevent h1 from moving down from border provided by tableWrapper div */
	margin:0 0 0 0;
}

.tableWrapper table
{
	margin: 0 10px;
	padding: 0;
	margin-left:0px;
}

.gridHeader
{
	background: #820000;
	color: #fff;
	text-align:center;
}

.gridHeader1
{ border:1px solid #666666;
	background: #820000;
	color: #fff;
	text-align:left;
}
.gridHeader a
{
   text-decoration:none;
   color:White;
}

 #content .gridHeader td /* made more specific to force override of overly broad padding in layout styles */
{
	
	padding: 5px 0px 5px 0px;
}

 .gridHeader th /* made more specific to force override of overly broad padding in layout styles */
{
	
	padding: 5px 0px 5px 10px;
	font-weight:normal;/* font getting very bold by default*/
	text-align:left;  
	color: #fff;
	
	
}
 .gridHeader th a /* made more specific to force override of overly broad padding in layout styles */
{
	
	padding: 5px 0px 5px 0px !important;
	font-weight:normal!important;/* font getting very bold by default*/
	text-align:left !important;  
	color: #fff !important;
	text-decoration:underline !important;
}


table.ruler {
	width:98%;
	
	
}
/* decreased font size for tables in account pages */
table.ruler_smallfont {
	width:98%;
	font-size:75%;
	
}


.grid td
{
	background-image: url(../corporate/images/dot.jpg);
	background-repeat: repeat-x;
	background-position: bottom;
	margin: 1em 16px 0 0;
	padding: 20px 10px 20px 10px;
	
	
	
	color: Black;
}
.gridnarrow td
{
	background-image: url(../corporate/images/dot.jpg);
	background-repeat: repeat-x;
	background-position: bottom;
	margin: 1em 16px 0 0;
	padding: 5px 0px 5px 15px;
	color: Black;
	vertical-align: top;
}
td.licenceList {	
	vertical-align: top;
	font-size: 8pt;
}
td.licenceList ul {
	margin-left: 0;
	padding-left: 0;
}
td.licenceList ul li {
	margin-left: 0;
	padding-left: 0;
}

.border
{
	border-color: #afafaf;
	border-bottom-width: 1px;
}
.formButtonText{
  background:#afb3b6;
    border:1px solid #666666;
    padding:2px 0px;  
  margin:5px 0 0 0;
  
    font-size:9px;
    font-weight:bold;
    cursor:pointer;
  float:right;
  text-decoration:none;
  
    }
    
  a.formButtonText{
    color:#fff;
    padding:3px 10px 4px 10px;    
    text-decoration:none;
  }
  
  table#actions { /* for the quote page */
	margin:5px 0 0 0;
	padding:5px 5px;
	width:23%;
	}	
div.subsection
{
	border-top:solid 1px black;
	margin:2em 5em 2em 0;
	padding:1em;
}
/*
 IE7/ASP.NET hack
 asp.net for`mview insists on containing everything inside a redundant table tag,
 IE7 won't allow the H1 background to extend left outside of the boundary of the
 formview's table/cell.
 To work around this limitation, we moved the whole table left by 10px (using a
 negative margin), and then used padding to move the contents of the table back
 again, thus giving space *inside* the table cell for the H1 background image.
*/
.formview-table > tbody > tr > td
{
	padding-left: 10px;
}

.formview-table
{
	margin-left: -10px;
	 /* remove 10px of the 20px left margin on content so that 
	 formview contents can be correctly indented by padding on the cell */
	width: 100%; /* to prevent headings inside formviews from being squashed */
}

.required-star /* for the little red star you get next to the labels of fields that are required */
{
	color: #f00;
	vertical-align: super;
}

table.left-headings th /* for tables with the headings down the left*/
{
	text-align: right;
}

fieldset
{
	border: none;
	margin: 1em 0;
	padding: 0;
}

legend
{
	width: 100%;
	font-weight: bold; /* to try and match H2*/
}

/* css for account detail forms */

table.account-form th
{
	font-weight: normal;
}

/*Css for project access check pop up window*/
.modalPopup {
	background-color:#fff;
	border-width:3px;
	border-style:solid;
	border-color:Gray;
	padding:3px;
	width:450px;
}
.modalBackground {
	background-color:Gray;
	filter:alpha(opacity=70);
	opacity:0.7;
}
/*mapshop top menu*/

ul#mapshop_menu
{
	font-size: 11.8px;
	margin: 0;
	padding-left:0;
	height: 27px; /* explicit height to insure items below are pushed down correctly */
	
	
}
ul#mapshop_menu li {
	float:left;
	display:block;
	background:#dfe1e0;
	text-align:center;
	border-right:1px #fff solid;
	line-height:27px;
}
ul#mapshop_menu li.last {
	border-right:0px #fff solid;
	width:134px;
	display:block;
	float:left;
}
ul#mapshop_menu li a, ul#mapshop_menu li a:link, ul#mapshop_menu li a:visited {
	color:#373737;
	display:block;
	text-decoration:none;
	width:136px;
	height:27px;
}
ul#mapshop_menu li a:hover, ul#mapshop_menu li a:focus {
	background:url(../corporate/images/bg-mapshop-menu.jpg) repeat-x;
	color:#fff;
}
ul#mapshop_menu li.current a, ul#mapshop_menu li.current a:link, ul#mapshop_menu li.current a:visited, ul#mapshop_menu li.current a:hover, ul#mapshop_menu li.current a:focus {
	color:#373737;
	display:block;
	text-decoration:none;
	background:url(../corporate/images/bg-mapshop-menu.jpg) repeat-x;
	color:#fff;
	font-weight:bold;
}
ul#mapshop_menu li.current2 a, ul#mapshop_menu li.current2 a:link, ul#mapshop_menu li.current2 a:visited, ul#mapshop_menu li.current2 a:hover, ul#mapshop_menu li.current2 a:focus {
	color:#fff;
	display:block;
	text-decoration:none;
	background:url(../corporate/images/bg-menu.jpg) repeat-x;
	color:#fff;
	font-weight:normal;
}
ul#mapshop_menu li.last a, ul#mapshop_menu li.last a:link, ul#mapshop_menu li.last a:visited {
	width:134px;
	display:block;
	height:27px;
}
ul#mapshop_menu li.last a:hover, ul#mapshop_menu li.last a:focus {
	background:url(../corporate/images/bg-mapshop-menu.jpg) repeat-x;
	color:#fff;
}

/* side menu for streetsAhead */

ul#side-menu
{
	font-size: 12px;
	margin: 0;
	padding: 0;
	width: 140px;
	color: Red; /* make missing links obvious */
}

#side-menu li
{
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#side-menu a
{
	color: #afb3b6;
	display: block; /* so that the width/height applies */
	background: #fff;
	padding: 6px 4px 4px 6px;
	text-decoration: none;
	border-bottom: 1px solid #afb3b6;
	min-height: 17px;
	
	
}

#side-menu li a.current
{
	/* highlight current item */
	background:#fff;
	color:Black;
}

#side-menu li a:hover, #side-menu li a:focus
{
	/* highlight menu item on mouse over */
	color: #A2B100;
	background: #fff;
}

.box-banner
{
	height: 85px;
	width: 660px;
	margin: 0 0 10px 0;
	position: relative;
	background: url(../mapshop/images/bg-plain-banner.jpg) no-repeat;
}
/* Plansahead logo on login page*/
#plans_ahead
{
	background: url(../mapshop/images/bg-plans_ahead-banner.jpg) no-repeat;
}

.box-banner li
{
	list-style: none;
	list-style-image: none !important; /* remove normal bullet image */
	background-position: 0 6px;
	padding-left: 8px;
	font-size: 6.5pt;
	padding-bottom: 0.25em;
}



.banner-lists
{
	position: absolute;
	top: 10px;
	left: 155px;
	width: 450px;
}
#plansahead-list1, #plansahead-list2, #reports-list1, #reports-list2
{
	float: left;
	color:#820000;	
	margin-left:-10px;
}


#plansahead-list1
{
	margin-right: 50px;
}
.box-banner #plansahead-logo
{
	/* move logo into correct position in banner */
	position: absolute;
	top: 25px;
	left: 15px;
	/* style text in case there's no image */
	color: #820000;
	font-size: 13pt;
	text-decoration: none;
}

/* Contractor Link */
.lapControlHeader 
{
  width: 96%;
  margin-left: 2%;
  margin-right: 2%;
  margin-bottom: 3px;
  background-color: #FAFFBD;
  border: 1px dotted #D9DDA4;
  font-size: 8pt;
}

/* media specific */

/*
* @media definitions for hiding stuff that is only for screen readers.
* should be defined as "@media visual" as per http://www.w3.org/TR/CSS21/media.html#media-groups
* but doesn't seem to be supported in IE7/FF3 yet.
*/
@media screen, print
{
	.accessible
	{
		display: none;
	}
}