/****** Surrey Coalition - Default Style *********/
/* This rule resets a core set of elements so that they will appear consistent across browsers. Without this rule, content styled with an h1 tag, for example, would appear in different places in Firefox and Internet Explorer because each browser has a different top margin default value. By resetting these values to 0, the elements will initially be rendered in an identical fashion and their properties can be easily defined by the designer in any subsequent rule. */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
}

/* The body is the outermost layout component and contains the visible page content. Setting properties for the body element will help to create consistent styling of the page content and more manageable CSS. Besides using the body element to set global properties, it is common to use the body element to set the background color of the page and create a centered container for the page content to display. */
body {
  background-color: #fff;
  background-image: url("file:///C|/Data/Dev/SurreyCoalition/img/bg1.gif");
  background-position: center center;
  background-repeat: repeat-y;
  color: #000;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
  line-height: 1.2em;
  margin: 0 0 0 0; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
  padding: 0 0 0 0; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
  text-align: center; /* Centers the page content container in IE 5 browsers. */
}

/* Commonly used to style page titles. */
h1 {
  color: #000;
  font-size: 1.4em;
  font-weight: bold;
  line-height: 1.4em;
}

/* Commonly used to style section titles. */
h2 {
  color: #000;
  font-size: 1.2em;
  font-weight: bold;
  line-height: 1.4em;
}

/* Sets the style for unvisited links. */
a,  a:link {
  color: #F0432D;
  text-decoration: underline;
}

/* Sets the style for visited links. */
a:visited {
  color: #F58374;
  font-weight: normal;
  text-decoration: underline;
}

/* Sets the style for links on mouseover. */
a:hover {
  color: #F58374;
  font-weight: normal;
  text-decoration: none;
}

/* Sets the style for a link that has focus. */
a:focus {
  color: #F0A52D;
}
/* Sets the style for a link that is being activated/clicked. */
a:active {
  color: #F0A52D;
}

/* This is a container for the page content. It is common to use the container to constrain the width of the page content and allow for browser chrome to avoid the need for horizontal scrolling. For fixed layouts you may specify a container width and use auto for the left and right margin to center the container on the page. IE 5 browser require the use of text-align: center defined by the body element to center the container. For liquid layouts you may simply set the left and right margins to center the container on the page. */
#outerWrapper {
  background-color: #fff;
  margin: 0 auto 0 auto; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
  text-align: left; /* Redefines the text alignment defined by the body element. */
  width: 780px;
}

#outerWrapper #header {
  /*background-color: #ddd;*/
  /*border-bottom: solid 1px #666;  Sets the bottom border properties for an element using shorthand notation */
  /*font-size: 18px;
  font-weight: bold;
  line-height: 15px;*/
  padding: 10px 10px 10px 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
}

#header {
	height: 140px;
	/*background: #fff url(../img/SurreyCoalition_logo110.jpg) no-repeat top left;*/
}

/*#header h1 {
	padding: 100px 0 0 5px;
}*/

#header p {
  font-size: .8em;
}

#outerWrapper #topNavigation {
  /*background-color: #ebebeb;*/
  /*border-bottom: solid 1px #666; /* Sets the bottom border properties for an element using shorthand notation */
  height: 25px;
  padding: 1px 0 10px 0; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
}

#outerWrapper #contentWrapper {
  background-repeat: repeat-y;
  overflow: hidden;
}

#outerWrapper #contentWrapper #rightColumn1 {
  background-color: #FEFAD2;
  border: solid 1px #666; 
  float: right;
	margin: 48px 5px 10px 0;
  padding: 10px 10px 10px 5px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
  width: 200px;
}

#rightColumn2 {
  background-color: #fff;
  border: none; 
  float: right;
	margin: 48px 5px 10px 0;
  padding: 10px 10px 10px 5px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
  width: 200px;
}

#rightColumn1 h2 {
  color: #F0432D;
}

#rightmenu {
	background-color: #FEFAD2;
	margin: 0 0 .5em .5em;
	padding: 1px;
	width: 150px;
}

#rightmenu a {
	border-bottom: dotted 1px #9EA3AA;
	background-color: #FEFAD2;
	color: #F0432D;
	display: block;
	padding: .3ex;
	text-decoration: none;
	width: 150px;
}
#rightmenu li {
	border-bottom: dotted 1px #9EA3AA;
	background-color: #FEFAD2;
	color: #F0432D;
	display: block;
	padding: 1ex;
	text-decoration: none;
	width: 150px;
}

#rightmenu a:hover{
	border-bottom: solid 1px #F58374;
	font-weight: normal;
	text-decoration: underline;
}

#rightmenu a:visited {
  color: #F58374;
  font-weight: normal;
}
 
#rightmenu .current {
	border-bottom: solid 1px #F0432D;
	font-weight: bold;
	text-decoration: none;
}

#rightmenu ul {
	font-family: verdana, arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 90%;
	list-style-type: none;
	padding: .3ex 0 0 0;
	margin: 0 0 .3ex 0;
}

#rightmenu li{
	border: solid 1px #FFFFFF;
	margin: 0 0 .3ex 0;
}

#rightmenu ul ul a {
	background-color: #FEFAD2;
	border-color: #000080;
	color: #000080;
	padding: .5ex 0 .5ex 1.5ex;
	margin: 0 0 .3ex 1ex;
	text-decoration: none;
	width: 130px;
}

#rightmenu ul ul a:hover {
	background-color: #FEFAD2;
	border-color: #FF0000;
	color: #FF0000;
	text-decoration: none;
	margin: 0 0 .3ex 1ex;
}

#rightmenu  ul ul .current {
	background-color: #FEFAD2;
	border-bottom: solid 1px #F0432D;
	font-weight: bold;
	margin: 0 0 .3ex 1ex;
}

/*#rightmenu  p a {
	background: transparent;
	border: none;
	color: #000000;
	padding: .5ex 0 .5ex 0;
}

#rightmenu p a:hover{
	background: transparent;
	border-bottom: solid 1px #F0432D;
	font-weight: bold;
} */

/* Contains the main page content. When using a mutliple column layout the margins will be set to account for the floated columns' width, margins, and padding. */
#outerWrapper #contentWrapper #content {
  margin: 0 220px 0 0; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
  padding: 10px 10px 10px 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
}

#content dl {
	line-height: 1.5em;
	padding-left: 2em;
}

#content dt {
	font-size: 110%;
	margin-top: .5em;
}

#content dd {
	font-size: 100%;
	line-height: 1.5em;
	margin-left: 0;
	padding-left: 0;
}

#outerWrapper #footer {
  background-color: #fee703;
  border-top: solid 1px #f0432d; 
  border-bottom: 1px solid #a9a9a9; 
  padding: 10px 10px 10px 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
}

#footer p {
	margin: 0;
	font-size: .8em;
}

#footer a {
	color: #000;
	text-decoration: underline;
}

#footer a:hover {
	color: #F0432D;
}

#footer .current {
	color: #000;
	text-decoration: none;
}

/* Top horizontal menu */
#navmenu{
padding: 0;
width: 100%;
background: transparent;
}

#navmenu ul{
font: bold .8em Arial;
margin:0;
/*margin-left: 10px;*/ /*margin between first menu item and left browser edge*/
padding: 0;
list-style: none;
}

#navmenu li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform:uppercase;
}

#navmenu a{
float: left;
display: block;
width: 108px;
color: #000;
margin: 0 1px 0 0; /*Margin between each menu item*/
padding: 5px 10px;
text-decoration: none;
letter-spacing: 1px;
background-color: #fee703; /*Default menu color*/
/*border-bottom: 1px solid #a9a9a9;*/
}

#navmenu a:hover{
background-color: #fff; 
color: #000;
}

#navmenu #current a{ /*currently selected tab*/
background-color: #F0432D; /*Reddish color theme*/ 
border-color: #F0432D; /*Reddish color theme*/ 
color: #fff;
}

#navmenuline{
clear: both;
padding: 0;
width: 100%;
height: 5px;
line-height: 5px;
background: #F0432D; /*Reddish color theme*/ 
}

/***** Style switcher *****/
#stylechanger {
	color: #000;
	float:right;
	padding: 10px 10px 0 10px;
	font-weight: bold;
	font-size: 1.2em;
}

img {
	border: none
}

.image-left {
	float: left;
	margin-right: 1em;
}

.image-right {
	float: right;
	margin-left: .2em;
}

.clear { clear: both; }

/**** Forms CSS */
div#formcontainer {width:500px; margin-left:40px;}
div#formcontainer h3 {margin:20px 0 0 20px; font-weight:bold; font-size:.8em;} /* adjust top margin for your context */
div#formcontainer h4 {margin:0 0 5px 10px; font-weight:normal; font-size:.75em;}
div#formcontainer form  {border-top: 2px solid #CCC; border-bottom: 3px solid #CCC;} /* the top border is visually 1 px thicker because it touches the div.clearfix bordertop */
div#formcontainer div.clearfix {border: 1px solid #CCC; padding:10px 0px; vertical-align:top;} /* adds the line above each section and provides vertical spacing */
div#formcontainer form label {width:120px; float:left;font-size:1em; color: #F0432D;   margin:0 10px;} /* this is the text label on the left of each input */
/*some extra styles for the checkbox and radio button sets*/	
div#formcontainer div.buttongroup {float:left; margin:0px; padding:0px;} /* a container for a groups of buttons - suppresses the clearfix div top border on the divs around the radio buttons/checkboxes */
div#formcontainer div.buttongroup div {margin-bottom:5px; font-size:.9em;} /* wrapper for the INPUT and its text - margin-bottom sets the vertical distance between buttons */
div#formcontainer div.buttongroup input {margin-right:5px;} /* set the distance between button and its label text */
/* postions the submit button by selecting a div with attribute type SUBMIT - IDWIMIE */
div#formcontainer input[type="submit"] {display:block; margin-left:auto; margin-right:10px;}
/* End of Forms CSS*/

/* here follows the brillant "no-extra-markup" clearing method devised by Tony Aslett - www.csscreator.com */
/* simply add the clearfix class to any containter that must enclose floated elements */
/* read the details of how and why this works at http://www.positioniseverything.net/easyclearing.html */
.clearfix:after {
    content: ".";              /* the period is placed on the page as the last thing before the div closes */
	display: block;          /* inline elements don't respond to the clear property */ 
    height: 0;                  /* ensure the period is not visible */
    clear: both;               /* make the container clear the period */
    visibility: hidden;	     /* further ensures the period is not visible */
}

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

/* next a fix for the dreaded Guillotine bug in IE6 */
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
/* end of "no-extra-markup" clearing method */

.mapsection {
	font-family: Tahoma;
	font-size: .8em;
}

.mapitem {
	font-family: Tahoma;
	font-size: .8em;
}