Change font size for Blogger pages - css

Question

The font size on my blog pages is significantly smaller than the font size in my regular blog posts. Here is a normal blog post with the font size I want: http://thereadinggrotto.blogspot.sg/2014/06/first-post.html
Here is the font size on one of the blog pages: http://thereadinggrotto.blogspot.sg/p/about-mermaid.html
I want to make the font on my pages larger.
I have tried tweaking the variable values but when I change the '11px' and '12px' to 15px, all it does is screw up the font size of my home page, which is not what I want.
The variable which screwes up the home page when I tweak it:
<Variable name="bodyfont" description="Text Font"
type="font" default="normal normal 11px Arial, Georgia, Serif" value="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif">
CSS for my blog posts (which does not seem to apply to blog pages):
/* =============================
Posts
============================= */
.post {
margin:.5em 0 1.5em;
border-bottom:1px solid #d3ebe1;
padding-bottom:1.5em;
font-family:'Cabin', sans-serif;
color:#305e58;
}
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:160%;
line-height:1.4em;
color:#305e58;
font-family:Yanone Kaffeesatz;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:#305e58;
font-weight:400;
}
.post h3 strong, .post h3 a:hover {
color:#09877d;
}
.post-body {
margin:0 0 1.75em;
line-height:160%;
font:15px 'Cabin', sans-serif;
color:#305e58;
}
.post-body blockquote {
line-height:1.3em;
}
.post-footer {
margin:.75em 0;
color:#8ba69b;
text-transform:uppercase;
letter-spacing:0.2px;
font:11px 'Cabin', sans-serif;
line-height:1.4em;
}
.comment-link {
margin-startside:.6em;
}
.post img {
max-width:640px;
height:auto;
}
.post table. tr-caption-container {
padding-bottom:4px;
}
.tr-caption-container img {
border:none;
padding:0;
}
.post blockquote {
margin:1em 20px;
padding:2px 5px 2px 35px;
font-style:normal;
color:#305e58;
}
.post blockquote p {
margin:.75em 0;
}
Another section of the CSS:
<b:if cond='data:blog.pageType == "item"'>
<style>
#outer-wrapper {
width:960px
}
#main-wrapper {
width:680px;
margin:0 10px 0 0;
border-left:1px solid #d3ebe1;
padding-left:15px;
}
#post-header-top {
border-bottom:1px solid #d3ebe1;
margin-bottom:20px;
padding-left:40px;
}
.date-post-top-wrapper {
float:left;
margin-right:10px;
}
.date-container {
width:auto;
height:auto;
text-align:center;
border-right:1px solid #d3ebe1;
padding:0 20px 10px 0;
margin-top:5px;
text-transform:uppercase;
}
.post-date-day-name {
font:300 25px Yanone Kaffeesatz;
color: #305e58
}
.post-date-day-month-year {
font:normal 10px Cabin;
color:#305e58
}
.post h3 {
margin:0 0 5px;
font:300 33px Yanone Kaffeesatz;
text-transform:uppercase;
color:#305e58
}
.post-footer {
padding:5px 10px;
margin:0 0 5px;
background:#d3ebe1;
border:1px solid #d3ebe1;
margin-left:40px;
}
.post {
margin:0 0 1.5em;
line-height:1.6em;
}
.post-body {
margin:0 0 1.75em;
font:15px Cabin, sans-serif;
line-height:160%;
margin-left:40px;
}
.post img {
max-width:640px;
height:auto;
}
.comments {
margin-left:40px;
}
#blog-pager {
margin-left:40px;
}
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
margin-left:40px;
}
#related-posts h2 {
color:#305e58;
padding:5px;
margin:0 0 10px;
text-align:center;
background:#edf7f2;
border-top:1px solid #d3ebe1;
font:300 17px Yanone Kaffeesatz;
}
#related-posts a {
color:#305e58;
overflow:hidden;
display:block;
width:80px;
height:155px;
}
#related-posts a:hover {
background:#d3ebe1;
color:#8ba69b;
overflow:hidden;
}
#related-posts a img {
transition:.3s linear;
-moz-transition:all .3s;
-webkit-transition:.3s linear;
box-shadow:none;
padding:4px;
padding-top:7px;
}
#related-posts a img:hover {
transition:.3s linear;
-moz-transition:all .3s;
-webkit-transition:.3s linear;
margin-bottom:5px;
}
#rptxt{
padding-top:5px;
width:68px;
height:65px;
margin:5px;
border-top:1px solid #d3ebe1;
font:300 13px Cabin, sans-serif;
font-style:italic;
}
</style>
I've put 15px for the font, but it's still 12px on pages.

Answer 1

Updating my answer, since that solution doesn't work for you.
The CSS code you have added in your question. update it, with this.
/* =============================
Posts
============================= */
.post {
margin:.5em 0 1.5em;
border-bottom:1px solid #d3ebe1;
padding-bottom:1.5em;
font:normal 15px 'Cabin', sans-serif;
color:#305e58;
}
you can see that i have changed the font property. try this it should work.