Styles not being inherited on mobile or in certain emails (Dependency on "bgcolor"?)

/* email-template.css*/

/* Mobile-specific Styles */
@media only screen and (max-width: 660px) {
table[class=w0],td[class=w0] {
    width:0!important
}

table[class=w10],td[class=w10],img[class=w10] {
    width:10px!important
}

table[class=w15],td[class=w15],img[class=w15] {
    width:5px!important
}

table[class=w30],td[class=w30],img[class=w30] {
    width:10px!important
}

table[class=w60],td[class=w60],img[class=w60] {
    width:10px!important
}

table[class=w125],td[class=w125],img[class=w125] {
    width:80px!important
}

table[class=w130],td[class=w130],img[class=w130] {
    width:55px!important
}

table[class=w140],td[class=w140],img[class=w140] {
    width:90px!important
}

table[class=w160],td[class=w160],img[class=w160] {
    width:180px!important
}

table[class=w170],td[class=w170],img[class=w170] {
    width:100px!important
}

table[class=w180],td[class=w180],img[class=w180] {
    width:80px!important
}

table[class=w195],td[class=w195],img[class=w195] {
    width:80px!important
}

table[class=w220],td[class=w220],img[class=w220] {
    width:80px!important
}

table[class=w240],td[class=w240],img[class=w240] {
    width:180px!important
}

table[class=w255],td[class=w255],img[class=w255] {
    width:185px!important
}

table[class=w275],td[class=w275],img[class=w275] {
    width:135px!important
}

table[class=w280],td[class=w280],img[class=w280] {
    width:135px!important
}

table[class=w300],td[class=w300],img[class=w300] {
    width:140px!important
}

table[class=w325],td[class=w325],img[class=w325] {
    width:95px!important
}

table[class=w360],td[class=w360],img[class=w360] {
    width:140px!important
}

table[class=w410],td[class=w410],img[class=w410] {
    width:180px!important
}

table[class=w470],td[class=w470],img[class=w470] {
    width:200px!important
}

table[class=w580],td[class=w580],img[class=w580] {
    width:280px!important
}

table[class=w640],td[class=w640],img[class=w640] {
    width:300px!important
}

table[class*=hide],td[class*=hide],img[class*=hide],p[class*=hide],span[class*=hide] {
    display:none!important
}

table[class=h0],td[class=h0] {
    height:0!important
}

p[class=footer-content-left] {
    text-align:center!important
}

#headline p {
    font-size:30px!important
}

.article-content,#left-sidebar {
    -webkit-text-size-adjust:90%!important;
    -ms-text-size-adjust:90%!important
}

.header-content,.footer-content-left {
    -webkit-text-size-adjust:80%!important;
    -ms-text-size-adjust:80%!important
}

img {
    height:auto;
    line-height:100%
    outline:none;
    text-decoration:none;
    display:block
}
}

/* Client-specific Styles */
#outlook a {
    padding:0
}

/* Force Outlook to provide a "view in browser" button. */
body {
    width:100%!important
}

.ReadMsgBody {
    width:100%
}

.ExternalClass {
    width:100%;
    display:block!important
}

/* Force Hotmail to display emails at full width */
/* Reset Styles */
/* Add 100px so mobile switch bar doesn't cover street address. */
body {
    background-color:#ececec;
    margin:0;
    padding:0
}

img {
    outline:none;
    text-decoration:none;
    display:block
}

a img {
    border: none;
}

br,strong br,b br,em br,i br {
    line-height:100%
}

h1,h2,h3,h4,h5,h6 {
    line-height:100%!important;
    -webkit-font-smoothing:antialiased
}

h1 a,h2 a,h3 a,h4 a,h5 a,h6 a {
    color:#004631!important
}

h1 a:active,h2 a:active,h3 a:active,h4 a:active,h5 a:active,h6 a:active {
    color:#004631!important
}

/* Preferably not the same color as the normal header link color.  There is limited support for psuedo classes in email clients, this was added just for good measure. */
h1 a:visited,h2 a:visited,h3 a:visited,h4 a:visited,h5 a:visited,h6 a:visited {
    color:#004631!important
}

/* Preferably not the same color as the normal header link color. There is limited support for psuedo classes in email clients, this was added just for good measure. */
table td,table tr {
    border-collapse:collapse
}

.yshortcuts,.yshortcuts a,.yshortcuts a:link,.yshortcuts a:visited,.yshortcuts a:hover,.yshortcuts a span {
    color:#000;
    text-decoration:none!important;
    border-bottom:none!important;
    background:none!important
}

/* Body text color for the New Yahoo.  This example sets the font of Yahoo's Shortcuts to black. */
/* This most probably won't work in all email clients. Don't include code blocks in email. */
code {
    white-space:normal;
    word-break:break-all
}

#background-table {
    background-color:#ececec
}

/* Webkit Elements */
#top-bar {
    border-radius:6px 6px 0 0;
    -moz-border-radius:6px 6px 0 0;
    -webkit-border-radius:6px 6px 0 0;
    -webkit-font-smoothing:antialiased;
    background-color:#004631;
    color:#fff
}

#top-bar a {
    font-weight:700;
    color:#fff;
    text-decoration:none
}

#footer {
    border-radius:0 0 6px 6px;
    -moz-border-radius:0 0 6px 6px;
    -webkit-border-radius:0 0 6px 6px;
    -webkit-font-smoothing:antialiased
}

/* Fonts and Content */
body,td {
    font-family:"Lato",Helvetica,Arial,san-serif
}

.header-content,.footer-content-left,.footer-content-right {
    -webkit-text-size-adjust:none;
    -ms-text-size-adjust:none
}

/* Prevent Webkit and Windows Mobile platforms from changing default font sizes on header and footer. */
.header-content {
    font-size:12px;
    color:#fff
}

.header-content a {
    font-weight:700;
    color:#fff;
    text-decoration:none
}

#headline p {
    color:#fff;
    font-family:'Georgia',serif;
    font-size:36px;
    text-align:center;
    margin-top:0;
    margin-bottom:30px
}

#headline p a {
    color:#fff;
    text-decoration:none
}

.article-title {
    font-size:18px;
    line-height:24px;
    color:#5C6942;
    font-weight:700;
    margin-top:0;
    margin-bottom:18px;
    font-family:"Lato",Helvetica,Arial,san-serif
}

.article-title a {
    color:#7a2426;
    text-decoration:none
}

.article-title.with-meta {
    margin-bottom:0
}

.article-meta {
    font-size:13px;
    line-height:20px;
    color:#ccc;
    font-weight:700;
    margin-top:0
}

.article-content {
    font-size:13px;
    line-height:18px;
    color:#444;
    margin-top:0;
    margin-bottom:18px;
    font-family:"Lato",Helvetica,Arial,san-serif
}

.article-content a {
    color:#004631;
    font-weight:700;
    text-decoration:underline
}

.article-content img {
    max-width:100%
}

.article-content ol,.article-content ul {
    margin-top:2px;
    margin-bottom:24px;
    margin-left:19px;
    padding:0
}

.article-content li {
    font-size:13px;
    line-height:20px;
    color:#444
}

.article-content li a {
    color:#004631;
    text-decoration:underline
}

.article-content p {
    margin-bottom:15px
}

.footer-content-left {
    font-size:12px;
    line-height:15px;
    color:#fff;
    margin-top:0;
    margin-bottom:15px
}

.footer-content-left a {
    color:#fff;
    font-weight:700;
    text-decoration:none
}

.footer-content-right {
    font-size:11px;
    line-height:16px;
    color:#fff;
    margin-top:0;
    margin-bottom:15px
}

.footer-content-right a {
    color:#fff;
    font-weight:700;
    text-decoration:none
}

#footer {
    background-color:#69813A; /* This is the correct color for the footer, and shows properly in browser on desktop, but on mobile, it is a navy blue */
    color:#fff
}

#footer a {
    color:#fff;
    text-decoration:none;
    font-weight:700
}

#permission-reminder {
    white-space:normal
}

#street-address {
    color:#fff!important;
    white-space:normal
}

#header {
    background-color:#69813A; !important
}
    <!--[if gte mso 9]>
    <style _tmplitem="722" >
    .article-content ol, .article-content ul {
       margin: 0 0 0 24px;
       padding: 0;
       list-style-position: inside;
    }

    <![endif]-->