body {
margin: 0 auto;
padding: 0px;
line-height: 1.5em;
width: 100%;
max-width: 2500px;
min-width: 900px;
font: smaller Georgia, Times, serif;
}

#header {
width: 900px;
margin: 0 auto;
height: 150px;
text-align: center;
border-bottom: 7px solid white;
}

#header h1 {
display: inline;
float: left;
/** border: 0.1em solid #dcdce9; **/
margin-top: 7px;
margin-bottom: 0;
}

#navigation {
float: right;
top: 109px;
position: relative;
width: 600px;

}

#navigation ul {
list-style: none;
padding: 0;
margin: 0;

}

#navigation ul li {
float: right;
margin: 0 0.15em;
}

#navigation li a {
height: 2em;
width: 9em;
line-height: 2em;
float: left;
display: block;
text-decoration: none;
text-align: center;
font-weight: bolder;
font-size: 130%;
/** border: 0.1em solid #dcdce9; **/
}

#featured {
width: 100%;
height: 349px;
background: url(/journals/renewingminds/images/diagonal-stripes.jpg) top center repeat #50575a;
text-align: center;
}

#nav {
width: 100%;
height: 349px;
background: url(/library/renewingminds/images/LibraryCampaign_building-900.png) top center no-repeat #50575a;
text-align: center;
}


#aside {
text-align: left;
width: 200px;
float: right;
padding: 100px 15px 100px 15px;
background-color: #e2e2e2;
}

#container {
width: 900px;
margin: 0 auto;
padding: 0px 10px 0px 10px;
}

#section {
width: 614px;
float: left;
padding: 10px;
/** border: 0.1em solid #dcdce9; **/
margin-top: 70px;
}

#footer {
clear: both;
background-color: #757575;
text-align: left;
margin-top: 5px;
width: 100%;
line-height: 125%;
color: #50575a;
}

#footer h3 {
color: white;
padding: 20px 5px 0px 5px;
width: 860px;
margin: 0 auto;
text-align: center;
}

#footer p {
padding: 10px 5px 20px 5px;
width: 860px;
margin: 0 auto;
text-align: center;
color: white;
}

#footer .thecontainer {
width: 900px;
height: 305px;
margin: 0 auto;
background: url(/library/renewingminds/images/LibraryCampaign_footerbg.png) bottom right no-repeat #95adb8;
text-align: left;
}

.footertext {
width: 350px;
text-align: left;
padding-top: 10px;
font-size: 80%;
}

#footer a:link {color: white; text-decoration: none;}
#footer a:visited {color: white; text-decoration: none;}
#footer a:hover {color: silver;}
#footer a:active {color: white; text-decoration: none;}

.footerfloater {
width: 150px;
text-align: left;
float: right;
margin-top: -13px;
padding-top: 13px;
}

h1,h2,h3,h4,h5,h6,#footer {
font-family: Gotham, Helvetica, Arial, san-serif;
}

h1 {font-size: 200%;}
h2 {font-size: 180%; color: #990000;}
h3 {font-size: 120%; margin-top: 40px;}
h4 {font-size: 125%; display: inline}
p {font-size: 110%; font-variant: normal;}

#aside a:link {color: #990000}
#aside a:visited {color: #990000}
#aside a:hover {color: #990000}
#aside a:active {color: #990000}

a:link {color: #757575;}
a:visited {color: #757575;}
a:hover {color: #000000;}
a:active {color: #990000;}

/* bootstraps sm breakpoint */
@media only screen and (max-width: 1200px) {
    body {min-width: 100px; font: medium Georgia, Times, serif;}
    #header {width: 100%; height: auto; padding: 0;}
    #navigation {position: inherit; width: 100%; clear: both; float: none; display: block;}
    #navigation ul li {float: none;}
    #navigation li a {float: none; text-align: left; padding-left: 10px;}
    #featured {height: auto; text-align: left; padding: 50px 0;}
    #featured img {width: 100%; height: auto;}
    #container {width: 100%; padding: 0;}
    #section {width: 100%; clear: both; padding: 0; margin-top: 0;}
    #aside {width: 100%;clear: both; float: none; padding: 0;}
    #aside li {padding: 20px;}
    #aside h3, #aside em {padding: 15px;}
    #footer h3, #footer p {width: 100%; }
}