body {
    background-color: #D8C398;    
    font-size: 87.5%;
    font-family: Arial, 'Lucida Sans Unicode';
    line-height: 1.5;
    text-align: left;
    width: 100%;
    margin-left: 20%;
}

a {
    text-decoration: none;
}

.mainHeader img
{
    max-width: 40%;
    padding-top: 1%;
}

.top-content img
{
    max-width: 100%;
}

.mainHeader img.Logo2
{
    width: 30%;
}

td
{
    padding: 2px;
}

a:link, a:visited {
    color: #CF5C3F;
}

a:hover, a:active {
    background-color: #CF5C3F;
    color: #FFF;
}

h3, h2, h1 {
    color: #CF5C3F;
}

.body {
        width: 90%;
        font-size: 95%;
        margin-left: 5%;
        margin-right: 5%;
        clear: both;
}

.mainHeader nav {
    background-color: #666;
    height: 40px;
    border-radius: 5px;
}

.mainHeader nav ul {
    list-style: none;
    margin: 0 auto;
}

.mainHeader nav ul li {
    float: left;
    display: inline;
}

.mainHeader nav a:link, .mainHeader nav a:visited {
    color: #fff;
    display: inline-block;
    padding: 10px 25px;
    height: 20px; 
  }

.mainHeader nav a:hover, .mainHeader nav a:active, .mainHeader nav .active a:link, .mainHeader nav .active a:visited {
    background-color: #CF5C3F;
    text-shadow: none;
}

.mainHeader nav ul li a {
    border-radius: 5px;
}

.top-content {
    border-radius: 5px;
    width: 65%;
    float: left;
    padding: 2% 2%;
    min-height: 500px;
    background-color: #D8C398;    
}

.post-info {
    font-style: italic;
    color: #999;
    font-size: 90%;
}

.sidebar {
    width: 27%;
    float: left;
    background-color: #D8C398;    
    border-radius: 5px;
    padding: 2% 2%;
    min-height: 500px;
}

.mainFooter {
    width: 100%;
    height: 40px;
    float: left;
    border-radius: 5px;
    background-color: #666;
}

.mainFooter p {
    width: 92%;
    margin: 10px auto;
    color: #FFF;
}

.js-video {
	height: 0;
	padding-top: 25px;
	padding-bottom: 67.5%;
	margin-bottom: 10px;
	position: relative;
	overflow: hidden;
}

.js-video.widescreen {
	padding-bottom: 57.25%;
}

.js-video embed, .js-video iframe, .js-video object, .js-video video {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	position: absolute;
}

/* iPhone portrait*/
@media screen and (max-width: 320px) {
    .body
    {
        width: 100%;
        font-size: 95%;
    }

    .mainHeader
    {
        width: 90%;
    }

    .mainHeader img
    {
        max-width: 100%;
    }

    .mainHeader nav
    {
        width: 100%;
        height: 200px;
    }

    .mainHeader nav ul
    {
        padding-left: 0;
    }

    .mainHeader nav ul li
    {
        width: 100%;
        text-align: center;
        display: block;
    }

    .mainHeader nav a:link, .mainHeader nav a:visited
    {
        padding: 10px 25px;
        height: 30px;
        display: block;
   }

    .post-info
    {
        display: none;
    }

    .top-content
    {
        width: 88%;
        float: left;
        background-color: #D8C398;    
        border-radius: 5px;
        min-height: 0;
    }

    .sidebar
    {
        min-height: 0;
        width: 85%;
        background-color: #D8C398;    
    }

    .mainFooter
    {
        width: 90%;
    }
} 


/* iPhone landscape*/
@media screen and (min-width: 321px) and (max-width: 480px) {
    .body
    {
        width: 100%;
        font-size: 95%;
    }

    .mainHeader
    {
        width: 90%;
    }

    .mainHeader img
    {
        max-width: 100%;
    }

    .mainHeader nav
    {
        width: 100%;
        height: 200px;
    }

    .mainHeader nav ul
    {
        padding-left: 0;
    }

    .mainHeader nav ul li
    {
        width: 100%;
        text-align: center;
        display: block;
    }

    .mainHeader nav a:link, .mainHeader nav a:visited
    {
        padding: 10px 25px;
        height: 30px;
        display: block;
   }

    .top-content
    {
        width: 88%;
        float: left;
        background-color: #D8C398;    
        border-radius: 5px;
        min-height: 0;
    }

    .sidebar
    {
        min-height: 0;
        width: 85%;
        background-color: #D8C398;    
    }

    .mainFooter
    {
        width: 90%;
    }
}

/*iPad Portrait*/
@media only screen and (min-width: 481px) and (max-width: 768px){
    .body
    {
        width: 90%;
        font-size: 95%;
        margin-left: 5%;
        margin-right: 5%;
    } 
       
    .mainHeader
    {
        width: 100%;
    }

    .post-info
    {
        display: none;
    }

  
    .top-content
    {
        width: 98%;
        float: left;
        background-color: #D8C398;    
        border-radius: 5px;
        min-height: 0;
    }

    .sidebar
    {
        min-height: 0;
        width: 97%;
        background-color: #D8C398;    
    }

    .mainFooter
    {
        width: 100%;
    }


} 


/*iPad Landscape*/
@media only screen and (min-width: 768px) and (max-width: 1024px){
    .body
    {
        width: 90%;
        font-size: 95%;
        margin-left: 5%;
        margin-right: 5%;
    } 
       
    .mainHeader
    {
        width: 100%;
    }


    .top-content
    {
        width: 60%;
        float: left;
        background-color: #D8C398;    
        border-radius: 5px;
    }

    .sidebar
    {
        width: 31%;
    }
    .mainFooter
    {
        width: 100%;
    }

}