/*****************************************************************
style.css
This file is organised into sections based on specificity of selectors,
from least specific to most specific. Note that this order should be
adhered to!
The sections are:
1. Elements: html elements without classes applied
2. Stereotypes: classes which are used throughout the site
3. Layout styles: classes used by the layout files
(general styles, then layout specific styles)
4. Template styles: styles relevant to a particular template
5. Content-type styles: styles relevant to specific content types
6. Method styles: styles relevant to specific methods
7. Property styles: styles relevant to particular properties of content types
------------------------------------------------------------------
WHERE TO ADD NEW STYLES
------------------------------------------------------------------
To decide where you should insert a new style definition, consider
the type of CSS selector you will need to create.
For example, if you are writing a rule to define a style for the "title"
stereotype within the "articles" template, your definition would look
something like this.
#t_articles .title{ ..style goes here ..}
In this case, put this rule in the "Template styles" section, as this is
the highest level of granularity defined in the selector.
In other words, look at the first part of the selector, work out what
section that relates to and put it there.
Within each section, try to sort styles by specificity of selector.
e.g.
#t_articles { ..style goes here ..}
#t_articles .title{ ..style goes here ..}
#t_articles .c_article .title{ ..style goes here ..}
******************************************************************/
/*****************************************************************
SECTION 1. ELEMENT STYLES
******************************************************************/
.s180{ width:180px; font-size:.7em; font-family:Verdana, Geneva, Arial,}
hr { border: 0; color: #B8BBC0; background-color: #fff; height: 1px;}
.fright{float:right;}
.fleft{float:left;}
.logos{clear:both; margin:0; padding:0;}
.icons{width:800px; text-align:left; margin:auto;}
.iconleft{float:left;}
.iconright{float:right; font-size:.7em; margin:10px;}
.icons a img {border:0px; margin:5px 5px 5px 0px;}
.note{font-size:.7em; border-bottom:1px dashed #ccc;padding:0 0 5px 0; margin:0 0 10px 0;}
.asterisk{color:#FF0000;}
#t_sitemap { padding: 0; margin: 0 0 0 20px; }
#t_sitemap ul li ul{margin:0; }
#t_sitemap ul li ul li{ margin:0; }
#t_sitemap li a {}
#t_sitemap ul.levelone { margin: 0px; padding: 0px; }
#t_sitemap ul.levelone li {list-style: square; margin: 0; text-align: left; font-weight: bold; padding: 5px 0px 5px 0px; }
#t_sitemap ul.leveltwo li {font-size:1.4em;text-align: left; margin: 0px 0px 0px 20px; list-style: disc; font-weight: normal; padding: 5px 0px 5px 0px; }
#t_sitemap ul.levelthree li{ text-align: left; margin: 0px 0px 0px 40px; list-style-type: circle; font-weight: normal; padding: 5px 0px 5px 0px; }
#t_sitemap li a.menu { text-decoration: none; padding: 0px; }
#t_sitemap li a.menu:hover { color: #8ED8E8; }
/* ------- sitesearch template ----------------- */
#t_sitesearch .results{margin:0; padding:0px 0px 10px 10px;}
#t_sitesearch .results h3.title{font-size:.8em; color:#009999;}
#t_sitesearch .results .highlight{color:#000000;}
#t_sitesearch .results dl{font-size:.7em; margin:0 0 0px 0px;}
#t_sitesearch .results dd.summary{margin:5px 0 0 0px; line-height:140%;}
#t_sitesearch .results dl dt {margin:0 0 0px 0; padding:0 0 0 0px;background-repeat: no-repeat;}
#t_sitesearch a.more{color:#015E5E;}
#t_sitesearch a:hover.more{text-decoration:none; color:#009999;}
#t_sitesearch dd.linkedtitle {margin:5px 0px 0px 0px; padding:0;}
#t_sitesearch dd.linkedtitle a{margin:5px 0px 0px 0px; padding:0; color:#009999;}
#t_sitesearch dd.linkedtitle a:hover{text-decoration:none; color:#009999;}
#t_sitesearch .no_results{padding:0px 0px 0px 0px; color:#ff0000;}
/* ------- general form ----------------- */
.generalform fieldset{border:1px solid #045A5A; margin:10px; padding:20px; }
.generalform legend{font-size:.9em; font-weight:bold; color:#045A5A; margin:0 0 10px 0;}
.generalform .button{background-color:#7EDCDF; border-top:1px solid #fff; border-right:1px solid #7F7F7F; border-bottom:1px solid #7F7F7F; border-left:1px solid #fff; padding:0 4px 0 4px; color:#000; font-weight:bold; font-size:.7em;}
.generalform label { padding: 1px; margin:0; font-size:0.7em; }
/* forms */
.altform { margin : 10px 2% 5px 2%; border: 1px solid #ccc; padding:5px; }
.altform h3{font-size:.8em; font-weight:bold; color:#015E5E; margin:0 0 0 0;}
.altform h4{font-size:1em; font-weight:bold; color:#015E5E; margin:0 0 0 0;}
.altform .bg {padding:5px; margin:8px 0 5px 0; background-color:#E8F6F6;}
.altform p {}
.altform fieldset { border: 0px solid #bad8c0; padding:0 0 0 0; margin: 10px 0 0 0; }
.altform table { margin: 0; background-color:#fff;}
.altform td { padding:3px 3px 3px 6px; font-size:0.7em; }
.altform td.heading {font-weight:bold;}
.altform td.divide {background-color:#ccc; height:2px; border-bottom:1px solid #d1b2d1;}
.altform input,
.altform select {font-size:1em;}
.altform textarea { font-size:1em; padding: 1px; margin:0;}
.highlight { margin : 10px 2% 5px 2%; color:#ff0000;}
.error_title { margin : 10px 2% 5px 2%; color:#000000; font-weight:bold;}
.highlight2 { margin : 0; color:#ff0000;}
.error_title2 { margin : 0; color:#000000; font-weight:bold;}
.widgets {margin:0 0 0px 160px; padding:0 0 10px 3px;}
.widgets ul{margin:0; padding:0; height:20px;}
.widgets ul li{float:left; padding:2px 0 0 15px; margin:0 10px 0 0; list-style:none; display:block; }
.widgets a{text-decoration:none; font-weight:bold; color:#666; padding:0; margin:0; }
.widgets a:hover{text-decoration:underline; }
.widgets li.print{background: url(../images/print.gif) no-repeat; }
.widgets li.send{background: url(../images/send.gif) no-repeat; }
.widgets li.bookmark {background: url(../images/book.gif) no-repeat; }
/* ------- acrobat ----------------- */
#acrobat{float:right; margin:10px;}
body { font-family: sans-serif; }
body,html {text-align:center; font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif; margin:auto; padding:0px; background-color: #E6EFEF;}
p {font-size:.7em; padding:0; margin:0 0 15px 0; line-height:150%;}
.clear{clear:both;}
form{ margin:0; padding:0;}
.logo{}
label{}
a img {border:0;}
.color1{color:#000; font-size:1.2em;}
.color2{color:#fff; font-size:1.2em;}
.ad{margin:0 0 0 3px}
.ad2{margin:0; padding:0; vertical-align: top;}
.left{float:left;}
a{color:#004A4A;}
a:hover{color:#004A4A; text-decoration:none;}
.topright span.skip {color:#F3AF4C; }
.topright span.skip a{color:#F3AF4C; }
.topright span.skip a:hover{color:#F3AF4C;}
ul#utility, ul#utility li { margin:0; padding:0; list-style-type:none }
ul#utility li { display:inline; font-size:1.4em; border-right: 1px solid #333; padding: 0 5px; }
ul#utility li.skip { border:0; }
ul#utility li.skip a { display:none; }
ul#utility li.last { }
img{margin:0; padding:0;}
h1{font-size: 1em; padding:0 0 3px 0; margin:10px 10px 0 10px; font-weight:bold; color:#045A5A; border-bottom:1px solid #009999}
h1 a { color:#045A5A; text-decoration:none }
h2{padding:5px 0 0 0; color:#009999; margin:0 0 8px 0; font-size:.9em; }
h3{font-size:.7em; color: #2E8080; padding:0; margin:15px 0 7px; border-bottom:0;}
h4{font-size:.7em; font-weight:bold; color:#666; margin:0 0 6px 0; padding:0;}
h5{font-size:.7em; color:#666; margin:0; padding:0}
.fullsizeimage{float:right;margin-left:10px; border:2px solid #ccc; padding:2px;}
.searchbut{background-color:#7EDCDF; border-top:1px solid #fff; border-right:1px solid #7F7F7F; border-bottom:1px solid #7F7F7F; border-left:1px solid #fff; padding:0 4px 0 4px; color:#000; font-weight:bold; font-size:.7em;}
ul{margin:0 0 0 12px; padding:0; font-size:.7em;}
ul li{padding:0; list-style-image: url(../images/bullet.gif); line-height:150%; margin:0 0 7px 0; white-space: normal; }
ol{margin:0 0 0 22px; padding:0; font-size:.7em;}
ol li{padding:0; line-height:150%; margin:0 0 0 0; }
ul li ul {margin:0px 0 0 10px; }
ul li ul li{font-size:1.4em; margin:3px 0 0 10px; }
ul.arrow{margin:0 0 0 18px; padding:0; font-size:.7em;}
ul.arrow li{padding:0; list-style-image: url(../images/arrow_sm.gif); line-height:150%; margin:0 0 7px 0; white-space: normal; }
/*****************************************************************
SECTION 2. STEREOTYPES
These are classes that are used throughout the site, by layouts,
content types, templates etc. Stereotype style declarations have no prefix.
An example of stereotype is "title".
******************************************************************/
.assets{clear:both;}
.assets h4{color:#000; margin:10px 0 10px 0; border-bottom:1px solid #ccc; padding:0 0 3px 0; font-size:.8em;}
h2.linkedtitle{font-weight:bold; margin:0 0 5px 0; padding:0; font-size:.8em;}
p.linkedtitle{font-weight:bold; margin:0 0 5px 0; padding:0;}
p.fileinfo{padding:3px; margin:0 10px 20px 0; background-color:#F1F7F7; border-bottom:1px solid #B5E2E2;}
.c_document p.summary{margin:0; padding:0;}
.c_documentcontainer p.summary{margin:0; padding:0;}
p.date{margin:0 0 2px; padding:0; }
.date { color:#636767; }
span.more{ display: block; background: url(../images/doc.gif) no-repeat; padding:0 0 0 17px; margin:4px 0 0 0; }
.thumbnail{float:right; clear:right; margin:0 0 10px 10px; border:2px solid #ccc; padding:2px;}
.title{font-weight:bold; color:#015E5E;}
h2.title{font-weight:bold; color:#009999;}
.title a{font-weight:bold; color:#015E5E;}
.more a{color:#009999; font-weight:bold; }
.more a:hover{color:#009999; font-weight:bold; }
.smallimage{float:left; }
p.more {color:#000; margin:0 0 0 10px;}
p.more a{ color:#000; padding:0; margin:0;}
.assets{clear:both;}
p.back a{display:block; margin:0 0 0 5px;padding:0 0 0 15px; font-weight:bold;text-decoration:none; background: url(../images/arrow_back.gif) no-repeat; }
p.back a:hover{color:#01A8A8; }
p.more a{display:block; margin:0 0 0 0;padding:0 0 0 10px; font-weight:bold;text-decoration:none; background: url(../images/arrow_more.gif) no-repeat; }
p.more a:hover{color:#01A8A8; }
/*****************************************************************
SECTION 3. LAYOUT STYLES
These are styles generated by layout files. Layouts should be wrapped
in a so you can easily define styles
to a particular layout.
******************************************************************/
/* ------- common layout styles ----------------- */
#l_holder { width:779px; border:9px solid #fff; margin:auto; padding:0; background-color:#fff; text-align:left;}
#l_holder_alt { width:779px; border:9px solid #fff; margin:auto; padding:0; text-align:left;}
#search {padding:8px; }
#search label{font-weight:bold; }
#search #search-txt { font-size:.7em; }
#search #ajaxSearch_input {width:128px; margin:5px 0 5px 0; font-size:.7em;}
#search #ajaxSearch_submit { background-color:#7EDCDF; border-top:1px solid #fff; border-right:1px solid #7F7F7F; border-bottom:1px solid #7F7F7F; border-left:1px solid #fff; padding:0 4px 0 4px; color:#000; font-weight:bold; font-size:.7em; }
/* ------- 3 col inside layout styles ----------------- */
#l_maincontent{margin:0; padding:0; width:779px;}
#l_col1{width:149px; margin:0; padding:0; float:left; text-align:left; }
#l_2colholder{float:left; width:629px; margin:0; padding:0;}
#l_col2{width:469px; padding:0; margin:0 5px 0 5px; float:left; display:inline; }
#l_col2_alt{width:620px; padding:0; margin:0; float:left; }
#l_col3{width:150px; padding:0; margin:0; float:left; }
/* ------- end 3 col inside layout styles ----------------- */
/* ------- header styles ----------------- */
#l_header{margin:0; padding:0 0 6px 0; width:779px; background-color:#fff; }
.l_topbar {background-color:#00ADA7; color:#fff; margin:0 0 6px 0; height:33px;}
.topleft{float:left; font-size:.7em; font-weight:bold; color:#fff; /*padding:9px 8px 8px 28px; background: url(../images/tel.gif) no-repeat ;*/ padding:9px 8px 8px 8px;}
.topright{float:right; font-size:.7em; color:#000; padding:9px 8px 8px 8px;}
.topright a{color:#000; text-decoration:none;}
.topright a:hover{color:#000; text-decoration:underline;}
.imgarea{ background-image: url(../images/header_img.jpg); background-repeat: no-repeat;width:779px; height:122px; padding:0; margin:0;}
.imgright{float:right; margin:0 0 0 10px; display:none}
.imgleft{float:left; display:none }
/* ------- end header styles ----------------- */
/* ------- main content styles ----------------- */
.bcrumb{/*background-color:#E8F6F6;*/ font-size:.7em; color:#666; margin:5px 10px;}
.noticeboard{border:1px solid #077275; padding:3px; margin:0 10px 10px 10px;}
.noticeboard h3{margin:0; padding:5px 5px 5px 20px; background: url(../images/arrow.gif) no-repeat #7EDCDF; color:#fff}
.noticeboard ul {margin:0 0 0 18px; padding:0; font-size:.7em;}
.noticeboard ul li{padding:0; list-style-image: url(../images/arrow_sm2.gif); line-height:150%; margin:0 0 7px 0; white-space: normal; }
.login{margin:0; padding:0;}
.login form{padding:8px;}
.login label, #forgotpsswd {font-size:.7em; }
.login input#username, .login input#password, input#txtwebemail { width:120px; font-size:1em; }
#forgotpsswd { display:block }
.login p{ padding:10px 0px 0px 10px;}
.login fieldset { margin:0; padding:0; border:0; }
.login h3 { display:none }
.feature {margin:0; padding:0;}
.feature h3 {border-top:2px solid #009999; border-bottom:2px solid #009999; padding:5px; margin:5px 0 5px 0;;}
.feature p {padding:0 8px 8px 8px; margin:0;}
.feature img {float:right; border:1px solid #009999;}
.feature a.more {font-weight:bold; display:block; background: url(../images/arrow4.gif) no-repeat; padding:0 0 0 12px; margin:0; color:#009899;}
.feature sub {color:#4D7979; }
/* ------- end main content styles ----------------- */
/* ------- footer styles ----------------- */
#l_footer{ height:37px; width:779px; font-size:.7em; background-color:#E1E0E7; margin:0;}
.footleft{float:left; padding:6px 5px 0 8px;}
.footright{float:right; padding:10px 8px 0 0px;}
/* ------- footer styles ----------------- */
/* ------- main menu styles ----------------- */
#mainmenu{margin:22px 0 0 0; padding:0;}
#mainmenu ul{margin:0; padding:0; width:624px; }
#mainmenu ul li{float:left; margin:0 0 0 0; padding:0; height:33px; font-family: Arial, Verdana, Geneva, Helvetica, Sans-Serif; font-size:1.6em; font-weight:normal; list-style-type: none; list-style-image: none; }
#mainmenu ul li.first{ margin:0 6px 0 0;}
#mainmenu ul li a{display:block; color:#fff; text-decoration:none; padding:3px 0 5px 10px; width:309px; voice-family: "\"}\""; voice-family:inherit; width:299px; } /* box model hack for IE */
.dummy{}
#mainmenu ul li.first a{ background-image: url(../images/menu1.gif); background-repeat: no-repeat;}
#mainmenu ul li.first a:hover{background-image: url(../images/menu1a.gif); background-repeat: no-repeat;}
#mainmenu ul li.first a.on{background-image: url(../images/menu1on.gif); background-repeat: no-repeat; }
#mainmenu ul li.first a.on:hover{background-image: url(../images/menu1on.gif); background-repeat: no-repeat; text-decoration:underline;}
#mainmenu ul li.second a{ background-image: url(../images/menu2.gif); background-repeat: no-repeat;}
#mainmenu ul li.second a:hover{ background-image: url(../images/menu2a.gif); background-repeat: no-repeat;}
#mainmenu ul li.second a.on:hover{ background-image: url(../images/menu2on.gif); background-repeat: no-repeat; text-decoration:underline;}
#mainmenu ul li a.on{background-image: url(../images/menu2on.gif); background-repeat: no-repeat; color:#fff; text-decoration:none; padding:3px 0 5px 10px; width:309px; voice-family: "\"}\""; voice-family:inherit; width:299px; }
.assets h4 {margin-bottom:5px;}
#acrobat{margin-left:10px; height:50px;}
/* ------- end main menu styles ----------------- */
/* ------- submenu styles ----------------- */
#submenu { text-align:left; padding:0; margin:0; background-color:#dfeff3; }
#submenu ul { margin:0; padding:0; border-bottom:1px solid #fff; padding:0; width:149px;}
#submenu ul ul { border:0; display:none; margin: 2px 0 0; }
#submenu ul ul ul { border:0; }
#submenu li { color:#fff; margin:0; list-style-type:none; display: inline; width:149px; }
#submenu li a { color:#004A4A; text-decoration:none; margin:0; display:block; padding:5px 5px 5px 8px; /*background: url(../images/menu_bg.gif) no-repeat #f00;*/ background:#dfeff3 url(../images/navitem_bg.gif) top right repeat-y; border-bottom:1px solid #fff; }
#submenu li a:hover { text-decoration:underline; }
#submenu li.current a { color: #045A5A; font-weight:bold; }
#submenu li.current li a { background:#dfeff3; }
#submenu li.current ul { border-bottom:1px solid #fff; }
#submenu li li a { border-bottom:0; }
#submenu ul ul li { font-weight:normal;}
#submenu ul ul li a { padding-left:14px; }
#submenu li li a, #submenu li.current li a, #submenu li.current li.current li a { font-weight:normal; border:0; }
#submenu ul ul li a.on { font-weight:bold; }
#submenu li.current ul, #submenu li.current li.current ul, #submenu li.current li.current li.current ul { display:block; }
#submenu li.current ul ul, #submenu li.current ul ul ul, #submenu li.current li.current ul ul { display:none }
#submenu li.current li.current a, #submenu li.current li.current li.current a {font-weight:bold; }
#submenu li.current li.current ul { border:0; }
#submenu li.current li.current li a { background:#fff; padding-left:18px; font-weight:normal; }
/* ------- end submenu styles ----------------- */
/* ------- end common layout styles ----------------- */
/* ------- default layout styles ----------------- */
/* ------- default layout submenu ----------------- */
/* ------- end default layout submenu ----------------- */
/* ------- end default layout styles ----------------- */
/*****************************************************************
SECTION 4. TEMPLATE STYLES
These are styles generated by templates. Each template identifies
itself by wrapping all content with a .
Insert any styles here that are specific to a particular template.
******************************************************************/
/* prev next pager style */
.spContentPaging{background-color:#FBF4DD; display:block; text-align:center; padding:5px 0 5px 0; margin:0 0 10px 0; font-size:.7em; color:#000; border-top:1px solid #F3AF4C; border-bottom:1px solid #F3AF4C; clear:left;}
.spContentPaging b{color:#000;}
.spContentPaging a{ color:#8B6614;}
.spContentPaging a:hover{ color:#8B6614; text-decoration:none;}
/* end prev next pager style */
#l_col3 h4 { background-color:#F3AF4C; color:#333; font-weight:bold; margin:15px 0 5px; padding:6px; color:#fff }
#l_col3 h4.first { margin-top:0; }
.ajaxSearch_highlight { background-color:#33FFFF }
.ajaxSearch_highlight1 { background-color:#FFFF99 }
.ajaxSearch_highlight2 { background-color:#00CC99 }
.ajaxSearch_highlight3 { background-color:#FF9966 }
.searchTerms, .ajaxSearch_resultsIntroFailure { font-size:0.7em }
/*****************************************************************
SECTION 5. CONTENT TYPE STYLES
These are styles specific to particular content types (e.g. if you
want all articles to have a blue border). Name these with a c_[contenttype]
******************************************************************/
.c_blurb{padding:10px; }
.c_article{padding:10px; }
.c_articlecontainer{padding:10px; }
.c_documentcontainer {margin:10px 10px 0px 10px;}
.c_faqcontainer {padding:5px 10px 10px 10px; background-color:#E6F7F6; margin:0 10px 10px 10px;}
.c_faqcontainer ul li, ul.questions li {list-style-image:url(../images/arrow_sm2.gif); background-repeat: no-repeat; margin:.4em 0 .4em 0; font-weight:bold; background-color:#E6F7F6;}
ul.questions { padding:5px 10px 10px 10px; background-color:#E6F7F6; margin:0 0 10px 0; }
ul.questions li { margin-left:10px; }
.c_faqcontainer ul li.current a, ul.questions li.current a { font-weight:bold; color:#000; text-decoration:none }
.c_faqcontainer ul li a, ul.questions li a {font-weight:normal; color:#03625A;}
.c_articlecontainer .m_summary{clear:both;}
.c_faq {margin:10px 0px 0px 10px;}
.c_document{padding:10px;}
.redbold{color:red;font-weight:bold}
/*****************************************************************
SECTION 6. METHOD STYLES
These are styles specific to particular methods, e.g. if you want all
"display" methods to output bold text. Name these m_[methodname]
******************************************************************/
/*****************************************************************
SECTION 7. PROPERTY STYLES
These are styles generated by content types. Whenever a property is
displayed, it is wrapped in a class called p_[propertyname].
******************************************************************/
/*****************************************************************
SECTION 8. Modx Styles
These are styles relavent to Modx.
******************************************************************/
.ditto_summary { margin:0 0 25px; padding-top:1px; }
.ditto_summary h3 { margin-top:0; }
.ditto_summary .date { margin-top:0px; }
.ajaxSearch_result { margin-top:10px; }
.ajaxSearch_result a.ajaxSearch_resultLink {font-size:0.8em;font-weight:bold; }
.ajaxSearch_paging { font-size:0.7em; }
#latest-news li a { font-weight:bold; text-decoration:none }
#latest-news li a:hover { text-decoration:underline }
#ditto_pages { text-align:center }
#ditto_pages span, #ditto_pages a { margin-right:5px; }
ul.reflect_archive, ul.reflect_archive li { margin:0; padding:0; list-style-type:none }
ul.reflect_archive { margin-bottom:15px; }
ul.reflect_archive li { display:inline; margin-right:10px; }
/*****************************************************************
SECTION 9. Font Resizing
******************************************************************/
ul#utility li.largeText, ul#utility li.normalText { border:0; padding-right:0 }
ul#utility li.largeText { display:inline }
ul#utility li.normalText { display:none; }
body#popup { background-color:#fff; padding:10px; text-align:center }
#popup table { margin:0 auto; }
#popup td { font-size:0.9em; }
#popup form textarea { width:360px; font-size:0.9em; }