html { font-size: 16px; }
body{
  width: 760px;
  margin: 12px auto 0px auto;
  background: #e3e1d5 none 0 0px repeat-x;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 62.5%;
  line-height: 1.6em;
}

/*
----------------------------------------------------------------------------- 
BASIC STYLING
-----------------------------------------------------------------------------
*/

h1, h2, h3, h4 { font-family: Calibri, Arial, Helvetica, sans-serif; font-weight: bold; }

h1 { font-size: 1.8em; padding: 8px 0 12px 0; color: #413185; }
h2 { font-size: 1.5em; padding: 8px 0 12px 0; color: #413185; }
h3 { font-size: 1.2em; padding: 8px 0 12px 0; color: #413185; }
h4 { font-size: 1.0em; padding: 4px 0 8px  0; color: black; }


p { padding: 0 0 8px 0; margin: 0; }
img { padding: 0; margin: 0; background-color: #eee; }
a img { border: none; }
ol li { list-style: none; margin-left: 12px; padding-bottom: 6px;}
ol, ul { padding-bottom: 12px; }
ul li { list-style: square; margin-left: 36px; padding-bottom: 6px; }
strong { font-weight: bold; }
em { font-style: italic; }


a { color: #413185; }
a:visited { color: #86314b; }
a:hover { color: #ff6600; }

/*
----------------------------------------------------------------------------- 
COMMON CLASSES
-----------------------------------------------------------------------------
*/

#diagnostic { }

.jumptocontent { position: absolute; text-indent: -9999px; } /* jump to content link */
.clear { clear: both; height: 1px; overflow: hidden; }
.introduction { font-weight: bold; padding-top: 3px; padding-bottom: 8px; border-bottom: 1px dashed #ddd; margin-bottom: 8px; }
.hidden { visibility: hidden; }
.notes { color: #7F756B; font-size: 0.9em; }
.indent { margin-left: 24px; }
.todo { background-color: #ffdd66; }
.todo:after { content: ' (content tbc)'; }
.center { text-align: center; }

/*
----------------------------------------------------------------------------- 
PAGE STRUCTURE AND LAYOUT
-----------------------------------------------------------------------------
*/

#page { width: 100%; position: relative; background-color: #FEFEFE; background: white url(/images/bg_navigation.jpg) top left repeat-y;  }

#main { font-size: 1.2em;  background-color: transparent; overflow: auto; padding-bottom: 6px; }

#banner { padding: 0; margin: 0; width: 570px; background: #413185 url(/images/bg_banner.gif) 0px 0px no-repeat; padding: 25px 0 22px 0; }

#main-content { background-color: transparent; }

#content { padding: 20px 34px 12px 20px; }


/*
----------------------------------------------------------------------------- 
ABSOLUTELY POSITIONED COLUMNS
-----------------------------------------------------------------------------
*/

.content-left { width: 190px; float: left; background-color: #99cc66; }
.content-right { margin-left: 190px; background-color: white; }

#home-main { overflow: auto; padding-left: 264px; position: relative; }
#home-main img { position: absolute; top: 0; left: 0; }

#home-supp { overflow: auto; padding-bottom: 8px; padding-top: 18px; }

.colleft-hp { width: 226px; float: left; }
.colright-hp { margin-left: 262px; }




#navigation { background: transparent; }
#navigation h1 { display: block; width: 190px; height: 177px; 
  background: #413185 url(/images/bg_logo.gif) top left no-repeat; 
  padding: 0; margin: 0; }
#navigation h1 a {
  display: block; width: 190px; height: 177px;
  text-decoration: none;
}



#content h2 {
  padding-top: 0;
  padding-bottom: 16px;
}

.homepage-image { margin: 4px 0 0 4px; width: 248px; }



#home-main { }
#home-main p.caption {
  text-align: center; font-size: 0.9em; font-weight: bold; color: #666; visibility: hidden;
}
#home-alt {
  top: 12px;
}
#home-alt h2 {
  padding: 12px 0 10px 0; margin: 0;
}
#home-alt ol {
  padding: 0 0 12px 0;
}

#additional-info { background: transparent url(/images/bg_footer.gif) 0px 12px no-repeat; 
  color: #333; padding: 28px 8px 4px 8px;}
#additional-info p { padding: 0; }
#additional-info a { color: #666; text-decoration: none; }
#additional-info a:hover { color: black; text-decoration: underline; }
#additional-info .right { float: right; }


/*
----------------------------------------------------------------------------- 
MENU ITEMS
-----------------------------------------------------------------------------
*/

#nav, #nav li { padding: 0; margin: 0; list-style: none; }
#nav { background-color: transparent; overflow: auto; padding: 12px 12px 80px 12px;}
#nav li { margin-bottom: 4px; }
#nav a { display: block; line-height: 1.8em;  
  text-decoration: none; width: 138px;
  background-color: transparent;
  font-weight: bold;
  color: white;
  padding: 0px 12px 0px 16px; }
#nav li.selected a { background-color: white; color: black; }
#nav li.selected a { 
  filter:alpha(opacity=50); opacity: 0.50; -moz-opacity:0.50;   
}
#nav li a:hover, #nav li.selected a:hover { background-color: white; color: #413185; }




/*
----------------------------------------------------------------------------- 
COUNCILLORS 
-----------------------------------------------------------------------------
*/



.records-list { margin: 0 0 12px 0; font-size: 0.95em; width: 100%; }
.records-list td, .records-list th { padding: 1px 4px 2px 4px; }
.records-list th { background-color: #ddd; }
.records-list .c1 { width: 85px; }
.records-list .c2 { width: 160px; }
.records-list .c3 { width: 60px; }
.records-list .c4 { width: 25px; }
.records-list .c5 { }
.records-list .c6 { width: 60px; }

.records-list tr:nth-child(odd){ background-color: #f6f6f6; }

.records-list-years, .records-list-years li { padding: 0; margin: 0; list-style: none; }
.records-list-years { overflow: auto; height: 1%; padding-bottom: 12px; }
.records-list-years li { float: left; }
.records-list-years li a { margin: 2px 12px; }
.records-list-years li a:active { font-weight: bold; }






#councillist, #councillist li { padding: 0; margin: 0; }
#councillist {
  margin-left: 158px;
}
#councillist li { 
 line-height: 2.4em; font-size: 0.95em; 
}



.planning-list { height: 400px; width: 517px; overflow: auto; }



.councillors, .councillors li { padding: 0; margin: 0; list-style: none; }
.councillors { padding-left: 200px; background: white none 12px 12px no-repeat; }
.councillors li { line-height: 56px; padding: 8px; margin-bottom: 12px; background-color: #ded;
}
.councillors li img { float: left; margin-right: 12px; } 

.east { background-image: url(/images/gorseinon-map-east.gif); }
.west { background-image: url(/images/gorseinon-map-west.gif); }
.central { background-image: url(/images/gorseinon-map-central.gif); }
.penyrheol { background-image: url(/images/gorseinon-map-penyrheol.gif); }




.councillors-list, .councillor-list-item { padding: 0; margin: 0; list-style: none; }
.councillors-list { overflow: auto; margin-top: 12px; }
.councillors-list .councillor-list-item { 
  padding: 0px 0 12px 112px; position: relative; margin-bottom: 12px; min-height: 90px; 
  border-bottom: 1px solid #ddd; 
}
.councillors-list .councillor-image { display: block; width: 80px; height: 80px; background: #ddd; 
  position: absolute; 
  left: 12px; 
  top: 4px;
  border: 1px solid white; 
  -webkit-box-shadow: 0px 2px 3px #666;
  -moz-box-shadow: 0px 2px 3px #666;
  box-shadow: 0px 2px 3px #666;
}
.councillors-list .councillor-name { padding: 0 0 0.25em 0; margin: 0 0 0 0; }
.councillors-list .councillor-position { background: #dec; padding: 2px 8px 2px 6px; margin-left: 8px; }
.councillors-list .councillor-email { float: right; font-weight: normal; font-size: 0.9em;}
.councillors-list .councillor-summary { padding: 0 0 0.25em 0; font-size: 0.9em; color: #444; }
.councillors-list .councillor-options { padding: 0 0 0 0; }



.news-list, .news-list-item { padding: 0; margin: 0; list-style: none; }
.news-list { overflow: auto; margin-top: 12px; }
.news-list .news-list-item { 
  padding: 0px 0 12px 112px; position: relative; margin-bottom: 12px; min-height: 90px; 
  border-bottom: 1px solid #ddd; 
}
.news-list .news-image { display: block; width: 80px; height: 80px; background: #ddd; 
  position: absolute; 
  left: 12px; 
  top: 4px;
  border: 1px solid white; 
  -webkit-box-shadow: 0px 2px 3px #666;
  -moz-box-shadow: 0px 2px 3px #666;
  box-shadow: 0px 2px 3px #666;
}
.news-list .news-date { font-size: 0.9em; font-weight: bold; padding: 0;}
.news-list .news-title { padding: 0 0 0.3em 0; margin: 0; }
.news-list .news-sumamry { font-size: 0.9em; color: #444; padding: 0 0 0.3em 0}