/* STYLESHEET FOR LEVEL 1 (home) & LEVEL 2 PAGES */


/* RESET establishes defaults and zeroes out padding, margins, etc. */

/* Normalizes margin, padding */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, table, th, td 
{margin: 0; padding: 0;}

/* Normalizes font size and weight for headers */
h1, h2, h3, h4, h5, h6 {font-size: 100%; font-weight: normal;}

/* Removes list-style from lists */
ol, ul {list-style: none;}

/* Normalizes font-style and font-weight to normal
address, caption, cite, code, dfn, em, strong, th, var {font-style: normal; font-weight: normal;} */

/* Removes spacing from tables */
table {border-collapse: collapse; border-spacing: 0;}

/* Removes border from table, fieldset and img */
table, fieldset, img {border: 0;}

/* Left-aligns text in caption and th */
caption, th {text-align: left;}

/* Removes quotation marks from q */
q:before, q:after {content:'';}

/* Removes line break from forms (makes forms inline) */
form  {display: inline;}


/* DEFAULT FONT, COLORS, PAGE SIZE */
html {text-align: center;}
body {width: 970px; margin-left: auto; margin-right: auto;
      font-size: 62.5%; font-family: Arial, Helvetica, sans-serif;
      text-align: left; background-color: white; color: black;}

/* SECTION CONTAINERS */
.saran {margin: 0 auto; width: 970px; height: auto;}
.wrap  {margin: 10px 0 0 0; width: 952px; height: auto; float: left; padding: 10px; border: 1px solid #BBB;}

/* LINKS unless overriden elsewhere */
a                 {color: #6DB02D; border: 0;}
a:link, a:visited {text-decoration: none;}
a:hover, a:active {text-decoration: underline;}

/* TOPMOST SECTION */
#welcome          {width: 948px; height: 90px; margin-left: auto; margin-right: auto; position: relative; text-align: left;}
.welcome-ad       {width: 728px; height: 90px; background: #DDB;}
.join-matter      {position: absolute; top: 0; right: 0; width: 220px; height: 90px; background: #51901E; color: white;}
.join-matter a    {color: white;}
.join-matter-now  {text-align: center; margin: 8px; font-size: 180%; font-family: "Times New Roman", Times, Georgia, serif; font-weight: bold;}
.join-matter ul   {margin-left: 15px;}
.join-matter li   {float: left; width: 100px; margin-bottom: 12px; font-size: 90%; font-weight: bold; text-transform: uppercase;}
.join-matter li a {display: block; padding-left: 18px;}
.newsletter       {background: transparent url(images/site/icon-matternetwork.gif) left center no-repeat;}
.twitter          {background: transparent url(images/site/icon-twitter.gif) left center no-repeat;}
.linkedin         {background: transparent url(images/site/icon-linkedin.gif) left center no-repeat;}
.facebook         {background: transparent url(images/site/icon-facebook.gif) left center no-repeat;}

/* HEADER */
#branding                   {width: 948px; height: 72px; position: relative; 
                             background: #261818 url(images/site/bg-header.gif) repeat-x;}
#branding h1                {width: 267px; height: 72px;}
#branding .tagline          {position: absolute; bottom: 14px; left: 275px; 
                             font-size: 120%; color: white; font-weight: bold; letter-spacing: 1px; word-spacing: 1px;}
#branding .searchbox       {position: absolute; bottom: 15px; right: 15px;}
#branding .searchbox label {color: white; text-transform: uppercase; padding-right: 3px;}
#branding .searchbox input {width: 100px; font-size: 90%; line-height: 9px;}
#branding .searchbox input.submit {width: 10px; height: 14px; position: relative; top: 4px; padding-left: 5px;}

/* NAV BAR */
#navbar                     {padding: 12px 0 24px 0; font-size: 100%; font-weight: bold; text-transform: uppercase; 
                             color: #555; background: white url(images/site/bg-gradient.gif) bottom repeat-x;}
#navbar a                   {margin-left: 25px; color: #555;}
#navbar .highlight          {color: #71B035;}
#navbar-matter              {float: right; display: inline; margin: 0 15px 0 0;}

/* USED IN MULTIPLE SECTIONS */
.more  {text-transform: uppercase; white-space: nowrap;}

/* HOME PAGE ONLY - Override Other Section Styles */
#home #navbar       {margin-bottom: 5px;}
#home #content      {padding-top: 12px; background-image: none; clear: both;}

/* HOME PAGE ONLY - FEATURE SECTION */
/* Column Layout */
#home-feature              {width: 948px; height: 285px;}
#home-feature-main         {width: 630px; height: 285px; float: left; margin-right: 2px; position: relative;}
#home-feature-side         {width: 316px; height: 285px; float: left;}
.home-feature-main-img     {width: 336px; height: 252px; position: absolute; top: 18px; left:  15px; overflow: hidden;}
.home-feature-main-text    {width: 245px; height: 215px; position: absolute; top: 55px; left: 366px; overflow: hidden;}
                        
/* Main/Left Column Internal Details */
#home-feature-main         {background: #E3EADF url(images/site/bg-gradient-lightgreengrey.gif) top repeat-x;}
.home-feature-main-text    {}
.home-feature-main-text-in {}
.home-feature-main-text h3 {font-size: 180%; line-height: 1.3; margin-bottom: 18px;}
.home-feature-main-text h2 {font-size: 120%; line-height: 1.3; color: #6DB02D; font-weight: bold; text-transform: uppercase;
                            display: inline; padding-right: .5em;}
.home-feature-main-text p  {font-size: 140%; line-height: 1.3; margin: 0; display: inline;}
.home-feature-author       {font-size: 120%; line-height: 1.3; text-transform: uppercase; margin-top: .2em;}
.home-feature-main-text a    {color: black;}
.home-feature-main-text h2 a {color: #6DB02D;}

.latest {color: white;}

/* Side/Right Column Internal Details */
#home-feature-side h2       {height: 25px; line-height: 25px; padding-left: 19px;
                             font-size: 110%; font-weight: bold; text-transform: uppercase; letter-spacing: 2px; word-spacing: 2px; 
                             color: white; background: #808898 url(images/site/bg-boxhead-grey.gif) top repeat-x;}
td.home-feature-side-img,
td.home-feature-side-text   {height: 63px; background: #EEF1EB; vertical-align: middle; overflow: hidden;}
td.home-feature-side-img    {width:  86px; text-align: center;}
td.home-feature-side-text   {width: 230px;}
td.home-feature-side-spacer {height: 2px;}
td.home-feature-side-text a {color: #564; font-size: 130%; line-height: 1.3;}
tr#highlight td             {background: #DCDFD1; color: black;}
tr#highlight td a           {font-weight: bold; color: black;}


/* LEVEL 2 PAGES ONLY - FEATURE SECTION */
#feature            {margin-top: 4px; width: 100%; height: auto; float: left; position: relative;}
#feature-img        {width: 260px; float: left; text-align: center;}
#feature-img img    {vertical-align: middle;}
#feature-txt        {padding: 0 15px 5px 0; width: 650px; float: right;}
#feature-txt h2     {margin-bottom: 8px; font-weight: bold; text-transform: uppercase;}
#feature-txt h2 .section-title {color: #6DB02D; font-size: 340%;}
#feature-txt h2 .date          {color: #C1DAA0; font-size: 160%; padding-left: 1em;}
#feature-txt h2 .date a        {color: #C1DAA0;}
#feature-txt h3                {margin-bottom: 5px; font-size: 250%; font-family: "Times New Roman", Times, Georgia, serif;}
#feature-txt h3 a              {color: black;}
#feature-txt p                 {width: 350px; font-size: 110%; line-height: 1.3; margin-bottom: .7em;}
#feature-txt p .feature-source {text-transform: uppercase; font-weight: bold; white-space: nowrap;}
.pipe               {font-size: 120%; padding: 0 5px;}
#feature-related    {margin-top: 15px;}
#feature-related li {margin: .5em 0; font-size: 120%; line-height: 1.2; font-weight: bold;}
#feature-related li a      {color: black;}
#feature-related .pipe     {font-weight: normal;}
#feature-related .source   {font-weight: normal; text-transform: uppercase; font-family: "Times New Roman", Times, Georgia, serif;}
#feature-related .source a {color: #6DB02D;}
#feature-more       {position: absolute; bottom: 5px; right: 15px; width: 190px; height: 22px; line-height: 22px; text-align: right; 
                     font-weight: bold; font-size: 120%; text-transform: uppercase; letter-spacing: 1px; font-family: Arial, Helvetica, sans-serif;}
#feature-more a     {display: block; padding-right: 30px; color: black;
                     background: white url(images/site/arrow-right-greenbox.gif) right center no-repeat;}


/* MAIN CONTENT SECTION */
/* Column Layout */
#content            {padding: 22px 0 10px 0; width: 100%; height: auto; float: left;
                     background: white url(images/site/bg-gradient.gif) top repeat-x;}
#column1, #column2  {width: 309px; height: auto; float: left; margin-right: 7px; 
                     border: 1px solid #BBB; border-width: 0 1px 1px 1px;}
#column3            {width: 309px; height: auto; float: left;}
.col-content        {padding: 0 10px 15px 10px;}

/* Headings */
#column1 h2, #column2 h2, #column3 h2
                    {padding-left: 10px; height: 36px; line-height: 36px; font-size: 110%; font-weight: bold; 
                     color: white; text-transform: uppercase; letter-spacing: 2px; word-spacing: 2px;}
#column3 h4         {padding-left: 10px; height: 36px; line-height: 36px; font-size: 90%; font-weight: bold;
                     background: #BAC1B9; color: white; text-transform: uppercase; letter-spacing: 1px; word-spacing: 1px;}
#column1 h2         {background: #809E5E url(images/site/bg-boxhead-green.gif) top repeat-x; position: relative;}
#column2 h2         {background: #489DB1 url(images/site/bg-boxhead-blue.gif) top repeat-x;  position: relative;}
#column3 h2         {background: #DDA95B url(images/site/bg-boxhead-orange.gif) top repeat-x;}
#column1 h2 img, #column2 h2 img {position: absolute; top: 10px; right: 10px;
                                  line-height: 16px; font-size: 90%; font-weight: normal; letter-spacing: 0;}
#column1 h2 a,   #column2 h2 a   {color: white;}

/* Column 1 & 2 Internal Details */
#content .entry         {margin: 10px 0 28px 0;}
#content table.entry td {vertical-align: bottom;}
#content img            {margin-right: 12px;}
#content div.advert img { margin-right: 0 !important; }
#content td img         {margin-bottom: .3em;}
#content table.entry h3 {width: 170px;}
#content .col-content a {color: black;}
#content .entry-source  {font-size: 110%; color: #6DB02D; font-weight: bold; text-transform: uppercase;}
#content .entry-source a  {font-size: 100%; color: #6DB02D; font-weight: bold; text-transform: uppercase; text-decoration: none; }
#content .entry-source a:hover  {font-size: 100%; color: #6DB02D; font-weight: bold; text-transform: uppercase; text-decoration: underline; }
#content h3             {font-size: 140%; line-height: 1.2; font-weight: bold; margin-top: .2em;}
#content p              {font-size: 130%; line-height: 1.2; margin-top: .3em;}
#column2 h3, #column2 p {font-family: "Times New Roman", Times, Georgia, serif;}

#content .first img {display: block; margin-bottom: 10px;}
#content .first h3  {font-size: 160%;}
#content .first p   {font-size: 130%;}

#content li         {font-size: 120%; line-height: 1.2; font-weight: bold; margin: .5em 0;}
.content-more       {font-size: 140%; text-align: right; font-weight: bold; text-transform: uppercase; white-space: nowrap;}

/* Column 3 Internal Details */
.advert, .promo     {text-align: center; background-color: white; margin: 5px 0 20px 0; padding-left: 4px;}
.matter-tv          {text-align: center; margin-bottom: 20px; padding-bottom: 5px;
                     border: 1px solid #BBB; border-width: 0 1px 1px 1px;}
.matter-tv h2       {text-align: left; margin-bottom: 5px;}
.matter-tv img      {text-align: center; margin: 0 auto;}
#home #content div.advert { margin-left: 641px; }

/* FOOTER */
#footer           {clear: both;}
#footer-b         {clear: both; margin: 8px 0 25px 0; text-align: center; font-size: 110%; font-weight: bold;}
#footer-b a       {margin: 0 10px; color: #999; text-transform: uppercase;}


/* COLORS
Greens: bright 6DB02D  light C1DAA0       join-matter 51901E
Greys:  lines  BBB     pipe char C6C6C6
Grey-green background: B9BFB1
*/