/************************** Site-wide Reset Styles ***************************/
/* Do not change any of these styles */
html,body,p,ul,ol,li,a,h1,h2,h3,h4,h5,h6,table,tbody,tfoot,thead,th,form{margin:0;padding:0;border:0;outline:0;}
.mainMenu tr .icn img{padding:0 0 0 10px;}
/* Overrides some troublesome DNN default styles */
.Normal,.NormalDisabled,.NormalBold,.NormalRed,.NormalTextBox{font-size:inherit;font-family:inherit;}
.Normal,.NormalDisabled,.NormalRed,.NormalTextBox{font-weight:inherit;}
.dnnRibbon .barContent{border:0 !important;border-top:1px solid #DADADA !important;}
.dnnRibbon input{height:auto !important;}
#dnn_ControlPanel .content{height:auto;}
.DNNEmptyPane{font-size:0px;}
#LBD_CaptchaImage img{position:absolute;}
/* The clear class is used to correct the flow of the layout after using a
* floated element ("float: left" in stylesheets or "align=left" on tables and
* imgs). Usually, floating an element takes it out of the 'flow' of the
* document, meaning that any containers or following elements will ignore the
* size and shape of the floated element, causing ugly overlapping content and
* missing backgrounds. The clear class forces the containing element to
* correct its height for its contents even if it's floated. It should be used
* by specified the clear class on any elements that contain a floated
* elements that you wish to clear.
* E.g.,
*
*
Content
*
*
) as it requires no extra html markup just for
* styling purposes, and it is also the only known method that works in all
* cases across all modern browsers. */
.clear:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clear{zoom:1;/*triggers hasLayout in IE*/}
/* The following classes cancel out any styles that have been specified on the
* body for the image and link browsers of the DNN text editor. Usually these
* dialogs would use the same styles as the rest of the site, sometimes
* causing issues with readability */
.FCKImageGalleryContainer{background-color:#FFFFFF;background-image:none;}
.FCKLinkGalleryContainer{background-color:#FFFFFF;background-image:none;}
.FormsContent table{width:auto !important;}
.ModuleTitle_SubMenu .txt{white-space:nowrap;}
/****************************** General Styles *******************************/
body, #Body, .Normal, .NormalDisabled, .NormalBold, .NormalRed, .NormalTextBox, table, h1, h2, h3, h4, h5, h6 {
/* Set this to the desired default website font */
font-family: Arial, Helvetica, sans-serif;
/* Set this to the desired default website font size */
font-size: 12px;
color: #000000;
}
/* Do not set font-size or font-family on the p tag or any other general tags
* other than #Body (see Layout Styles) as this will cause problems when trying
* to set styles on container elements later on. Site wide font settings should
* be specified on the body tag, or if you require a different font style
* somewhere on the site, add the different font styles to a class or id on the
* containing element. */
p, .Normal p {
/* !important is required on margin to override a style on the container */
margin: 10px 0 !important;
}
ol {
margin: 5px 0 5px 15px;
list-style-type: decimal;
}
ol li {
padding: 5px 0;
}
ul {
margin: 10px 0 10px 0;
}
ul li {
list-style-type: none;
background: url(images/li.gif) center left no-repeat;
padding: 5px 0 5px 10px;
}
a, a:link, a:active, a:visited, a:hover {
color: #0457a5;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
h1 {
margin: 20px 0;
font-size: 30px;
font-weight: bold;
}
h2 {
margin: 5px 0 25px 0;
font-size: 26px;
font-weight: normal;
color: #0457a5;
}
h3 {
margin: 0 0 5px 0;
font-size: 18px;
font-weight: bold
}
h4 {
margin: 0;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
color: #000000;
}
h5 {
margin: 0;
font-size: 12px;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #0457a5;
text-transform: uppercase;
}
h6 {
margin: 10px 0;
font-size: 15px;
font-weight: bold;
}
hr {
border: 0;
border-bottom: 1px dotted #d3d3c8;
margin: 10px 0;
}
/******************************* Layout Styles *******************************/
#Body {
text-align: center; /* Centers the website in IE */
/* Causes long words that are too wide for its container to break mid-word
* and wrap onto the next line */
word-wrap: break-word;
background: url(images/tile_strip.gif) top left repeat-y #0457a5;
}
#main {
background: url(images/main_bg_top.gif) top left repeat-x #0457a5;
margin: 0 0 0 8px;
}
.pageCenter {
/* Centers the website in all browsers except IE and cancels out the
* text-align: center specified on #Body */
margin: 0 auto;
text-align: left;
/* Total width of the website. This must be specified in order to center
* the website. This should NEVER be more than 996px or you will get
* scrollbars on 1024x768 resolution screens. If your design measures
* wider than this, go and ask your designer about it */
width: 950px;
}
#header {
height: 142px;
/* Required to absolutely position elements inside of the header
* See #profilePhoto for more information */
position: relative;
}
#logo {
/* Absolutely positions the element wherever you like in the header
* 'bottom: 0;' locks the element to the bottom of the container
* 'top: #px;' puts the top of the element #px down from the top of
* the header. This same technique can be used for the site title as well
* as bylines or portfolios. If the height of the element + the value for top is
* greater than the height of the header, the element will overlap
* the content below it. This can sometimes be put to effect
* (see http://www.sharmanstone.com.au for example)
* The header MUST have position: relative for this to work
* otherwise you will have unexpected results */
position: absolute;
top: 32px;
left: 2px;
z-index: 10;
}
#header h1 {
/* See notes in #profilePhoto regarding absolute positioning*/
position: absolute;
top: 35px;
left: 108px;
margin: 0;
/* Image replacement technique
* Use the following to replace the site title with a premade image
* This is useful for non-standard fonts, and is the kindest way to
* replace the text with an image for search engines, without using
* javascript
* The height and width must match that of the image */
background: url(images/councillor_adrian_schrinner.gif) top left no-repeat;
text-indent: -9999px;
width: 285px;
height: 47px;
}
#swish {
/* Absolutely positions the element wherever you like in the header
* 'bottom: 0;' locks the element to the bottom of the container
* 'top: #px;' puts the top of the element #px down from the top of
* the header. This same technique can be used for the site title as well
* as bylines or portfolios. If the height of the element + the value for top is
* greater than the height of the header, the element will overlap
* the content below it. This can sometimes be put to effect
* (see http://www.sharmanstone.com.au for example)
* The header MUST have position: relative for this to work
* otherwise you will have unexpected results */
position: absolute;
bottom: -1px;
left: 71px;
}
#contactDetails {
position: absolute;
bottom: 15px;
right: 10px;
}
#contentWrapper {
background: url(images/right_column_bg.gif) top right repeat-y #ffffff;
margin: 0 0 45px 0;
}
#bottomCorners {
padding: 0 0 14px 0;
background: url(images/bottom_corners.gif) bottom left no-repeat;
}
#contentBorder {
border-left: 1px solid #044b8e;
border-right: 1px solid #044b8e;
}
#contentBorderLeft {
background: url(images/content_border_left.gif) top left repeat-y;
}
#contentPaneWrapper {
/* Don't use margin-left on anything with float:left */
float: left;
/* Don't use padding-left, padding-right, border-left or border-right on
* anything with width */
width: 628px;
}
#bannerPaneWrapper {
background: url(images/banner_divider.gif) bottom left repeat-x;
padding: 0 0 28px 0;
}
#contentPanePadding {
padding: 12px 12px 0 12px;
}
.ContentPaneHome {
line-height: 140%;
padding: 15px 15px 10px 15px;
}
.ContentPaneSub {
line-height: 140%;
padding: 10px 40px 10px 40px;
}
.ContentPaneSub h1,.ContentPaneSub h2,.ContentPaneSub h3,.ContentPaneSub h4,.ContentPaneSub h5,.ContentPaneSub h6,.ContentPaneHome h1,.ContentPaneHome h2,.ContentPaneHome h3,.ContentPaneHome h4,.ContentPaneHome h5,.ContentPaneHome h6 {
line-height: normal;
}
#latestNewsTop {
background: url(images/latestnews_top.gif) top left no-repeat #edeeee;
}
#latestNewsBottom {
background: url(images/latestnews_bottom.gif) bottom left no-repeat;
padding: 16px;
}
#socialIcons {
margin: 25px 0 10px 15px;
}
#socialIcons img {
margin: 0 0 0 5px;
}
#rightPaneWrapper {
/* Don't use margin-left on anything with float:left */
float: left;
/* Don't use padding-left, padding-right, border-left or border-right on
* anything with width */
width: 320px;
background: url(images/right_column_bg_top.gif) top right no-repeat;
}
.RightPane {
padding: 22px;
}
.RightPane, .RightPane .Normal, .RightPane .NormalDisabled, .RightPane .NormalBold, .RightPane .NormalRed, .RightPane .NormalTextBox, .RightPane table {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
}
#right_featureButtons a {
font-weight: bold;
font-size: 12px;
}
.RightPane ul {
border-top: 1px dotted #d3d3c8;
}
.RightPane li {
border-bottom: 1px dotted #d3d3c8;
padding-bottom: 10px;
padding-top: 10px;
}
#footer {
background: url(images/footer_bg.gif) top left repeat-x #f0ab15;
text-align: center;
margin: 0 0 0 8px;
height: 268px;
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#footerPadding {
padding: 20px 0px 65px 0px;
}
/* Set the font styles in the footer - also need to override the default a styles */
#footer td, #footer td a{
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}
#footer a {
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#footer h5 a {
color: #0457A5;
font-size: 12px;
}
#footer ul {
margin: 0 0 0 15px;
}
#footer ul li {
list-style-type: disc;
list-style-image: none;
background: none;
/* padding: 0 0 0 12px;*/
padding: 0;
margin: 0;
}
/******************************** Menu Styles ********************************/
#menu {
/* Do not specify a height here. See line-height in the .root class */
float: left;
width: 633px;
margin-top: 1px;
}
/* Menu item (top level only) */
.mainMenu .root {
display: block;
float: left;
white-space: nowrap;
/* Background images cannot be used here as they clash with the dropdown arrows */
background: url(images/menu_bg_left.gif) top left no-repeat !important;
padding: 0 0 0 13px;
color: #ffffff;
font-size: 13px;
margin-right: 1px;
font-weight: bold;
}
.mainMenu .root .txt {
background: url(images/menu_bg_right.gif) top right no-repeat;
padding: 0 13px 0 0;
/* Use line-height instead of height. line-height has the added advantage of
* vertically centering a single line of text. It will also allow your menu to
* elegantly wrap onto two or more lines if there are too many for a single row */
line-height: 48px;
display: inline-block;
}
/* Last menu item (top level only) */
.mainMenu span.last {
margin-right: 0;
}
/* Menu item hover (top level and sub menu items) */
.mainMenu .hov {
cursor: pointer;
}
.mainMenu span.hov {
background: url(images/menu_bg_left.gif) bottom left no-repeat !important;
}
.mainMenu span.hov .txt {
background: url(images/menu_bg_right.gif) bottom right no-repeat;
}
/* Sub menu */
.mainMenu table {
background: #ffffff;
white-space: nowrap;
z-index: 100;
padding: 3px;
}
/* Menu item (sub menu only) */
.mainMenu tr .txt {
line-height: 30px;
display: block;
padding: 0 10px;
border-bottom: 1px dotted #d3d3c8;
color: #0457A5;
}
.mainMenu tr.hov {
background: #1D4193;
}
.mainMenu tr.hov .txt {
color: #ffffff;
}
.mainMenu tr.last .txt {
border-bottom: 0;
}
/* Other possible menu style declarations include:
* All menu items .mainMenu .mi {}
* Menu item hover (top level only) .mainMenu span.hov {}
* Menu item hover (sub menu only) .mainMenu tr.hov {}
* Currently selected menu items (top level only) .mainMenu span.sel {}
* Currently selected menu items (sub menu only) .mainMenu tr.sel {}
* First top level menu item .mainMenu span.first {}
* Last top level menu item .mainMenu span.last {}
* Currently selected menu item .mainMenu .sel {} */
/******************************* Search Styles *******************************/
#search {
float: left;
width: 317px;
height: 49px;
background: url(images/search_bg.gif) top left no-repeat;
}
#searchPadding {
padding: 10px 0 0 76px;
}
/* Search text box container */
#search div.SearchBorder {
background: url(images/search_box.gif) top left repeat-x;
border: 1px solid #999999;
margin: 5px 7px 0 0;
height: auto;
width: auto;
}
/* Search text box */
#search .SearchBorder input {
outline: 0; /* Removes orange highlight in Google Chrome */
/* These properties can be set to whatever you like. The !important tag is used to
* override some default DNN styles that would otherwise clash */
border: 0;
background: none !important;
font-family: Verdana, Arial, Helvetica, sans-serif !important;
font-weight: normal !important;
width: 181px !important;
height: 17px !important;
color: #000000 !important;
padding: 0;
}
/* Search button */
#search a {
background: url(images/search_button.gif) top left no-repeat;
width: 31px;
height: 28px;
display: block;
float: left;
padding: 0;
}
/* Search button hover */
#search a:hover {
background: url(images/search_button.gif) bottom left no-repeat;
text-decoration: none;
}
/* Drop down search options */
#SearchIcon {
display: none;
}
/***************** Tabbed Panels *********************/
#tabbedPanel {
margin: 20px 0 0 0;
zoom: 1; /* Triggers hasLayout for IE */
}
/* Tabs */
#tabbedPanel .tab {
cursor: pointer;
float: left;
position: relative;
top: 1px;
border: 1px solid Black;
background: Gray;
padding: 4px 40px 4px 20px;
margin: 0 1px 0 0;
font-weight: bold;
}
/* Can declare tab-specific styles by putting an id on the tab or content */
#tabbedPanel #videoTab {
background: Red;
color: White;
}
/* Tabs when selected */
#tabbedPanel .selTab {
background: White;
/* When using borders as in this example, increase the bottom padding by 1px (as defined above)
* and remove the bottom border. This method is preferred over simply making the bottom border
* the same as the background colour, because doing so would present a gap in the left-border
* in Internet Explorer due to the bottom-border overlapping the left-border */
border-bottom: 0;
padding-bottom: 5px;
}
/* Can declare tab-specific styles by putting an id on the tab or content */
#tabbedPanel #videoTab.selTab {
background: Orange;
}
/* Tab content */
#tabbedPanel .tabContent {
display: none;
clear: both;
background: White;
border: 1px solid Black;
padding: 0 20px;
}
/* Tab content when selected */
#tabbedPanel .selContent {
display: block;
}
/* Can declare tab-specific styles by putting an id on the tab or content */
#tabbedPanel #videoContent {
background: Orange;;
}
/************************* BREADCRUMBS *************************/
#breadcrumbs {
text-align: right;
text-transform: uppercase;
font-size: 11px;
}
#breadcrumbs .Breadcrumb:last-child {
color: #000000;
}
/********************************************************************/
.latestNewsHome h2 {
margin: 0 0 10px 0;
}
.latestNewsHome .articleListing {
float: left;
width: 180px;
margin-left: 16px;
display: inline;
}
.latestNewsHome .first {
margin-left: 0;
}
.latestNewsHome .articleImage {
margin-bottom: 15px;
text-align: center;
}
.latestNewsHome h3 {
font-size: 14px;
margin: 0;
}
/*--------------------------subpage various-------------------------------*/
.bt-wrapper canvas {
position:relative !important;
}
ul#twitter_update_list {
margin:0;
padding:0;
}
ul#twitter_update_list li {
list-style-image:none;
list-style-type:none;
margin:0;
padding:0;
}
ul.tweet_list li {
list-style-image:none;
list-style-type:none;
background:none;
background-image:none;
padding:5px 0px;
}
/****************************** articles *************************/
#articlesMenu {
margin: 25px 0;
text-align: center;
}
h1#articleCategory {
margin: 0 0 25px 0;
border-bottom: 1px solid #9f9f9f;
}
#articles .articleListing {
padding: 25px 0;
border-top: 2px dotted #cccccc;
}
#articles .first {
padding-top: 0;
border: 0;
}
#articles h2 {
margin: 0;
font-family: Georgia, "Times New Roman", Times, serif;
color: #16498c;
font-size: 26px;
font-weight: normal;
border: 0;
background: none;
padding: 0;
}
#articles .articleItem {
float: left;
width: 307px;
margin: 0 25px 0 0;
}
#articles .articleInfo p {
font-style: italic;
margin: 0px 0 !important;
}
#articles .articleImage {
float: left;
padding: 5px;
border: 1px solid #c9c9c9;
}
#articles .articleImageView {
float: right;
padding: 5px;
border: 1px solid #c9c9c9;
margin: 0 0 25px 25px;
}
#articles .comments {
margin: 0 0 25px 0;
}
.PagingTable {
background: transparent;
border: 0;
width: auto;
}