html, body
html { font-size: 16px; }

body {  
  font-family: Arial, Helvetica, sans-serif;
  background-color: white;
  color: black;
  font-size: 62.5%; 
  line-height: 1.8em;
}


/*
--------------------------------------------
GENERAL HTML STYLES
--------------------------------------------
*/

h1 { display: block; float: left; padding-left: 18px; padding-top: 4px; width: 203px; }
h1 a { background: white url(../images/bg-logo.gif) 24px 0px no-repeat; display: block; height: 65px; width: 174px; text-decoration: none; }
h1 a:hover { background-position: 24px -65px }
h2 { font-size: 1.6em; font-weight: bold; color: #999; margin: 1.8em 0 0.8em 0; padding: 0;}
.h2image { background: center left no-repeat; padding: 20px 0 24px 80px; margin-top: 1em; }
.single-news-item h2 { font-size: 1em; font-weight: normal; color: #aaa; margin: 0 0 0 0 }
.single-news-item h2.h2image, .h2imagesmall { margin: 16px 0 0 0; padding: 10px 0 12px 50px; background: center left no-repeat; }
.news-col h2 { font-size: 1.3em; margin-bottom: 18px; color: #777; }
h3 { font-size: 1.1em; font-weight: bold; color: #333; padding: 0.5em 0 0.5em 0; }
.single-news-item h3 { font-size: 1.6em; color: #999; margin: 0.9em 0 0.8em 0; padding: 0; }
h4 { font-size: 1.0em; font-weight: bold; color: #eee; padding: 0.4em 0 0.5em 0; }

p { padding-bottom: 0.8em; }
ul, ol {margin-bottom: 1em; }
li { padding-bottom: 0.5em; padding-left: 0.5em; margin-left: 28px; list-style: disc; }
a { color: navy; }
a:hover { color: #900; }
a[target="_blank"] { background: url(../images/url_icon.gif) center right no-repeat; padding-right: 18px; }

blockquote { padding-left: 18px; padding-bottom: 6px;}

strong { font-weight: bold; }
em { font-style: italic; }
img { padding: 0; margin: 0; }
table, tr, th, td {color: inherit; }
tr, td { vertical-align: top; }
td { padding: 2px 4px; }


/*
--------------------------------------------
COMMON STYLES
--------------------------------------------
*/

.hidden { visibility: hidden; }
.hide { display: none; }
h2 .hidden { display: none; }
.introduction { padding: 8px 0 8px 0; font-weight: bold; font-size: larger; }
.clear { clear: both; font-size: 1px; overflow: hidden; height: 1px; }
.indent { padding-left: 18px; }
.jumptocontent { display: none; }
.contentanchor { display: none; }
.center { text-align: center; }
.inlineimg { margin: 1em 0 0 0; text-align: center }
.btn-back { display: block; margin-top: 1em; border-top: 1px solid #ddd; background: #eee; padding: 3px 8px 5px 8px; text-decoration: none; }
.btn-back:hover { text-decoration: none; border-top: 1px solid #bbb; background-color: #ddd; }
.notice { border: 1px solid #ccc; background: #ffd; padding: 0.5em 1em; margin-bottom: 1em; }

.notes { color: #888; font-size: 0.9em; }
.notes h4 { color: #888; font-size: 1.2em; border-bottom: 1px solid #ddd; margin-bottom: 8px; }

/*
--------------------------------------------
PAGE STRUCTURE STYLES
--------------------------------------------
*/

#page { border: none; width: 960px;  margin: 12px auto 24px auto; position: relative; }

#main-content { clear: both; background: white url(../images/bg-main-content.gif) top center repeat-y; padding: 0 2px; border-bottom: 4px solid #A7A9AC; font-size: 1.2em; overflow: auto; height: 1%; }
.subpage #main-content { background-image: url(../images/bg-main-content-withside.gif); }

#slideshow { height: 46px; border-bottom: 1px solid #ccc; background: #eee url(../images/bg-slideshow.jpg) 0px 0px no-repeat; padding-top: 200px; }

#branding { background: transparent url(../images/bg-branding.gif) bottom center no-repeat; padding-bottom: 17px; }

#content-left, #content-right { padding: 12px 18px; }

#content-left { float: left; width: 546px; }
.subpage #content-left { width: 184px; background: #ddd; color: white; }
.portfolio-page #content-left { width: 560px; }

#content-right { margin-left: 591px; width: 332px; padding-left: 14px;  background: #ddd; }
.subpage #content-right { float: right; margin: 0; width: 690px; padding-left: 0; padding-bottom: 3em; background: none; }
.caption { text-align: center; font-size: 0.9em; font-weight: bold; padding-bottom: 1em; color: #999; }
.portfolio-page #content-right { margin-left: 604px; width: 330px; padding-left: 0; background: none; }

#content-right { -moz-border-radius-bottomleft: 1em; -webkit-border-radius-bottomleft: 1em; border-radius-bottomleft: 1em; }
.subpage #content-right, .portfolio-page #content-right { -moz-border-radius-bottomleft: 0; -webkit-border-radius-bottomleft: 0; border-radius-bottomleft: 0; }

/*
---------------------------------------------------------
NEWS RELATED STYLES
---------------------------------------------------------
*/


.news-list, .news-list li, .portfolio, .portfolio li { padding: 0; margin: 0; list-style: none; }
.multiple-news-items { border-top: 1px solid #ddd; padding-top: 0.5em; }
.multiple-news-items .news-list { margin-top: 1em; padding-left: 1.5em; }
.news-list li { padding: 0 0 0 128px; position: relative; min-height: 80px; }
.multiple-news-items li { margin-bottom: 1em; padding-left: 150px;}
.news-date { font-weight: bold; color: #999; }
.abstract { font-weight: bold; margin-bottom: 1em; }
.news-image { position: absolute; left: 2px; border: 1px solid #ddd; padding: 6px; }
.news-image:hover { border: 1px solid #999; }
.news-list h4 { padding: 0 0 4px 0; margin: 0; }
.news-author { font-size: 0.8em; padding: 0 0 4px 0; }
.multiple-news-items .news-author { font-size: 0.9em; font-weight: normal; color: #999; padding-left: 0.5em; }
.news-comments { background: #888; padding: 0px 6px 0px 3px; color: #ddd; text-decoration: none;  }
.news-comments:hover { background: #aaa; color: #333; }
.news-list .readmore { display: block; padding-left: 24px; font-size: 0.9em; text-decoration: none; }
.news-list .readmore:hover { text-decoration: underline; }


.home-news-list, .home-news-list li { padding: 0; margin: 0; list-style: none; color: #444; }
.home-news-list h4 { padding: 0 0 4px 0; margin: 0; display: inline; } 
.home-news-date { font-weight: bold; color: #999; }
.home-news-image { float: left; margin-right: 1em; }
.home-news-image { filter:alpha(opacity=75); opacity: 0.75; -moz-opacity:0.75;  }
.home-news-list li:hover .news-image { filter:alpha(opacity=100); opacity: 1.0; -moz-opacity:1.0;  }
.home-news-list li { padding-bottom: 1em; position: relative; }
.home-news-comments { background: #666; padding: 0px 3px 0px 3px; color: #ddd; text-decoration: none;  }
.home-news-comments:hover { background: #aaa; color: #333; }
.home-news-list .home-news-author { display: inline; }
.home-news-list p { font-size: 0.9em; }
p.home-news-author { padding: 0; }


.news-comments, .home-news-comments { -moz-border-radius: 0.5em; -webkit-border-radius: 0.5em; border-radius: 0.5em; }


/*
---------------------------------------------------------
ASSOCIATION STYLES
---------------------------------------------------------
*/

.list, .list li { padding: 0; margin: 0; list-style: none; }
.list { padding: 1em 0 0 100px; position: relative; margin-left: 1.5em }
.list li { padding: 0 0 1.4em 0; }
.list h4 { color: #666; font-size: 1.2em; padding: 0 0 0.5em 0; margin: 0; }
.list .links { display: block; padding: 0 0 0.5em 1em; font-size: 0.9em; line-height: 1em; margin: 0.3em 0 0.5em 0; }
.list-image { position: absolute; left: 0px; padding: 10px 0 0 0;  }


.links, .links li { padding: 0; margin: 0; list-style: none; }
.links { overflow: auto; height: 1%; width: 500px; margin: 1.2em auto 1em auto; }
.links li { float: left; padding: 0 0 0 30px; margin-right: 16px; background: #eee left center no-repeat; }
.links li.last { margin-right: 0; }
.links a { color: #999; text-decoration: none; font-size: 0.9em;}
.links a:hover { color: #900; text-decoration: underline; }
#links-fb { background: white url(../images/link-fb.gif) top left no-repeat; line-height: 22px; }
#links-tw { background: white url(../images/link-tw.gif) top left no-repeat; line-height: 22px; }
#links-rss { background: white url(../images/link-rss.gif) top left no-repeat; line-height: 22px; }


.portallist, .portallist li { padding: 0; margin: 0; list-style: none; }
.portallist { overflow: auto; height: 1%; padding: 1em 0 1.5em 0; }
.portallist li { float: left; width: 22%; margin-left: 3%; padding: 0 0 0.5em 0; }


/*
---------------------------------------------------------
ADDITIONAL  STYLES
---------------------------------------------------------
*/


.btn-quote { border-top: 1px solid #bbb; padding-top: 1em; }
.btn-quote a { background: #eee; border: 1px solid white; display: block; padding: 4px 8px; text-align: center; text-decoration: none; }
.btn-quote a:hover { background: white; border: 1px solid white; }

.comments, .comment { padding: 0; margin: 0; list-style: none; }
.comments { margin-bottom: 1em; }
.comment { padding: 0 0 1.5em 2em; color: #333 }
.comment h4 { color: #669; padding: 0.2em 1em 0.2em 0.5em; margin: 0 0 0.5em 0;  background: #eed; }
.comment h4 .date { color: #aaa; font-size: 0.9em; padding-left: 1em; }
.comment-text { padding-left: 1em;}
h3.h2comments { font-size: 1.2em; padding: 0; margin: 0 0 0.75em 0; }

.comment-form { border: 2px solid #eee; padding: 0.7em 1em; overflow: auto; height: 1%; }
.comment-form label { display: block; clear: both; margin-bottom: 0.5em; width: 180px; float: left; }
.comment-form input, .comment-form textarea { float: left; }
.comment-form textarea { width: 440px; height: 100px; }
.comment-form-submit { clear: both; float: none; margin-top: 0.5em;}
.comment-form .notes { clear: both; font-size: 0.9em; padding: 6px 0 0 0; color: #999; }






.pagination { clear: both; border-top: 1px solid #ddd; padding-top: 1em; text-align: center; }
.pagination a { border: 1px solid #ddd; background: #eee; padding: 2px 6px; margin: 0 3px; }
.pagination a.selected { background: #c99; color: #eee; }
.pagination a:hover { background: #900; color: #eee; }


.portfolio { overflow: auto; height: 1%; }
.portfolio li { border: 4px solid #ddd; margin: 4px; float: left; width: 90px; height: 60px; background: navy;   }

#quote { margin: 18px 0 8px 0; font-style: italic; 
  background: transparent url(../styles/quote_left.gif) top left no-repeat; text-indent: 18px; padding: 0;  }
#quote p { display: inline; }
#quote .quote-source { background: transparent url(../styles/quote_right.gif) top left no-repeat; padding-left: 18px; }
#quote .quote-link { padding-left: 6px; }


.point-ysw { background: transparent url(../images/ysw-favicon.gif) top left no-repeat; text-indent: 22px; }

.point-bvsportals { background: transparent url(../images/bvsportals-favicon.gif) top left no-repeat; text-indent: 22px; }


.portfolio-focus, .portfolio-focus li { padding: 0; margin: 0; list-style: none; }
.portfolio-focus li { margin: 0 0 12px 0; padding: 10px 12px 10px 12px; position: relative; overflow: auto; height: 1%; }

.portfolio-focus li { -moz-border-radius-bottomleft: 8px; -webkit-border-radius-bottomleft: 8px; border-radius-bottomleft: 8px; 
-moz-border-radius-topright: 12px; -webkit-border-radius-topright: 8px; border-radius-topright: 8px;
}
.portfolio-focus li img { float:left; margin-right: 12px; display: block; width: 180px; height: 120px; background: white; }

.portfolio-list, .portfolio-list li { padding: 0; margin: 0; list-style: none; }
.portfolio-list li { padding-bottom: 2px; margin-bottom: 4px; }
.portfolio-list a { display: block; background: #eee; padding: 2px 6px; text-decoration: none; }
.portfolio-list .description { display: none; font-size: 0.9em; color: #666; padding: 0 0 0 18px; }

/*
---------------------------------------------------------
NAVIGATION STYLES
---------------------------------------------------------
*/

#nav, #nav li { padding: 0; margin: 0; list-style: none;}
#nav { background: #ccc url(../images/bg-nav.gif) top right no-repeat; 
  width: 739px; 
  min-height: 68px; 
  padding: 0 0 6px 0px; 
  overflow: auto; height: 1%;
}
#nav li { float: left; width: 150px; font-size: 1.1em; line-height: 1.3em; }
#nav li.last { width: 137px; }
#nav li strong { font-weight: bold; display: block; font-size: 1.2em; padding-bottom: 8px;}
#nav li a { color: #ddd; text-decoration: none; padding: 12px 12px 0px 18px; display: block; }
#nav li a:hover { color: #eee; text-decoration: underline; }
#nav li a strong { color: #eee; }
#nav li a:hover strong { color: white; }


#nav-sub { margin-top: 0.9em;}
#nav-sub li { list-style: square; color: #888; margin-left: 22px; padding-bottom: 6px;}
#nav-sub a { color: navy; }
#nav-sub a:hover { color: #900; }

.breadcrumbs { font-size: 0.9em; color: #999; }
.breadcrumbs a { color: #779; text-decoration: none; }
.breadcrumbs a:hover { color: navy; text-decoration: underline; }

/*
---------------------------------------------------------
FOOTER STYLES
---------------------------------------------------------
*/

#site-info { clear: both; background: green url(../images/bg-site-info.gif) bottom center no-repeat; text-align: center; padding: 6px 0 8px 0; color: #ccc; font-size: 1em; }
#site-info .subtle { color: #999; padding: 0 2px;}
#site-info .services { padding: 0 0 4px 0; }
#site-info .services-portals { padding: 0 24px 8px 24px; line-height: 1.3em; }
#site-info .address { padding: 0 0 4px 0; }
#site-info a { color: #ccc; text-decoration: none; }
#site-info a:hover { color: #eee; text-decoration: underline; }

#copyright { clear: both; text-align: center; padding: 8px 0 12px 0; color: #888; }
#copyright a { color: #3C6980; text-decoration: none; }
#copyright a:hover { color: #3C6980; text-decoration: underline; }