/* Main structural elements */

@font-face {
    font-family: 'Kalam';
    src: url('/fonts/Kalam-Regular.woff2') format('woff2'), url('/fonts/Kalam-Regular.woff') format('woff'), url('/fonts/Kalam-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal; 
}
body {
    font-family: 'Kalam', sans-serif;
    font-weight: normal;
    font-style: normal; 
    text-decoration: none;
    -webkit-font-smoothing: antialiased;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    font-size: 12px;
    line-height: 14px;
    color: #616160;
    background-color: #ffffff;
    margin: 10px;
    padding: 0px;
}
#pagewidth {
	position: relative;
    margin: 0px auto 0px auto;
}

#header {
    padding: 0px;
    width: 750px;
    min-height: 100px;
    overflow: hidden;
    margin: 0px auto 0px auto;
}
#header #logo {
    float: left;
}
#header #instagram {
    clear: right;
    float: right;
    margin: 20px;
}
#header #facebook {
    float: right;
    margin: 20px;
}
#header #linkedin {
    float: right;
    margin: 20px;
}
#header #address {
    float: right;
    font-size: 14px;
    margin-top: 50px;
}

#navmenu {
    display: none;
}
#navbar {
    clear: both;
    font-size: 15px;
    font-weight: bold;
}
#navbar ul {
    width: 750px; /* adjust for number in list since fit-content doesn't work with IE */
    padding: 0px;
    margin: 0px auto 20px auto;
}
#navbar ul li {
    display: inline-block;
    list-style: none;
    padding: 5px 0px 5px 0px;
    margin: 10px 0px 0px 0px;
    text-align: center;
}
#navbar ul li.currentpage {
    background-image: url(/images/overline.gif);
    background-repeat: no-repeat;
    background-position: center top;
}
#navbar ul li a {
    display: block;
    color: #616160;
    width: 140px;
    margin: 0px;
    text-decoration: none;
}
#navbar ul li a:hover {
    color: #bf4e2d;
}

#footer {
    position: relative;
    clear: both;
    background-color: #a5af8c;
    width: 750px;
    margin: 0px auto 0px auto;
    text-align: center;
}
#footer div.socials {
    position: relative;
    font-size: 20px;
    line-height: 14px;
    height: 100px;
    color: #ffffff;
    padding: 20px 0px 10px 0px;
}
#footer a {
    position: absolute;
    bottom: 40px;
}
#footer a.linkedin { left: 275px; }
#footer a.facebook { left: 365px; }
#footer a.instagram { left: 365px; }/*435px; if all three*/
#footer div.left {
    font-size: 14px;
    color: #616160;
    float: left;
    text-align: right;
    margin-top: 10px;
    padding: 0px 0px 0px 20px;
}
#footer div.right {
    font-size: 15px;
    color: #616160;
    float: right;
    text-align: right;
    margin-top: 10px;
    padding: 0px 10px 0px 0px;
}

#content {
    position: relative;
    padding: 0px;
    width: 750px;
    margin: 0px auto 0px auto;
}
#content div.homephoto, #content div.aboutphoto, #content div.adminfees, #content div.montessoriphoto {
    position: relative;
    font-size: 0px;
    line-height: 0px;
    width: 750px;
    margin: 0px auto 0px auto;
    text-align: center;
}
#content img.scaled {
    width: 100%;/* need to work on this for mobiles */
}

/* Home page elements */
#home div.homephoto img.ofsted {
    position: absolute;
    bottom: 0px;
    left: 0px;
}
#home #summaryblock {
    position: relative;
    padding: 0px;
}
#home #summaryblock h1 {
    margin: 40px 0px 0px 0px;
}
#home #logohome {
    position: absolute;
    left: 0px;
    top: 30px;
}
#home #bunting {
    position: absolute;
    right: 0px;
    top: 30px;
}
#home #flower {
    position: absolute;
    left: 0px;
    top: 280px;
}
#home div.list {
    font-size: 40px;
    line-height: 45px;
    color: #bf4e2d;
    margin: 190px 0px 0px 0px;
    text-align: center;  
}
#home h2 {
    margin: 80px 0px 0px 0px;
}
#home #summaryblock p {
    font-size: 30px;
    line-height: 35px;
    width: 550px;
    margin: 40px auto 20px auto;
    text-align: center;
}
#home #holidays {
    font-size: 18px;
    line-height: 22px;
    width: 550px;
    border: 2px solid #bf4e2d;
    margin: 20px auto 20px auto;
    padding: 15px;
}
#home #holidays h2 {
    font-size: 25px;
    color: #bf4e2d;
    margin: 0px;
    padding: 0px;
}
#home #holidays h3 {
    font-size: 20px;
    color: #bf4e2d;
    margin: 0px;
    padding: 10px 0px 0px 0px;
}

/* About page elements */
#about div.aboutphoto img.ofsted {
    position: absolute;
    top: 20px;
    left: 0px;
}
#about div.aboutphoto p.vision {
    position: absolute;
    top: 50px;
    left: 250px;
    font-size: 100px;
    line-height: 90px;
    color: #ffffff;
}
#about div.aboutphoto p.statement {
    position: absolute;
    bottom: 0px;
    left: 10px;
    font-size: 20px;
    color: #ffffff;
    line-height: 25px;
    width: 550px;
    margin: 40px auto 20px auto;
    text-align: left;
}
#about p {
    font-size: 20px;
    line-height: 25px;
    margin: 10px auto 10px auto;
    text-align: center;
}
#about img.photo1, #about img.photo2, #about img.photo3, #about img.photo4, #about img.photo5 {
    width: 250px;
}
#about p.about1 { padding-top: 100px; padding-left: 100px; }
#about p.about2 { padding-top: 200px; padding-left: 0px; margin-left: 200px; }
#about p.about3 { padding-top: 100px; padding-left: 300px; }
#about p.about4 { padding-top: 250px; margin-left: 100px; }
#about p.about5 { padding-top: 200px; margin-left: 0px; }
#about img.flower1 { width: 100px; }
#about img.rainbow { clear: left; width: 120px; }
#about img.photo3 { clear: both; }
#about img.bunting { margin-right: 30px; }
#about img.flower2 { clear: both; }
#about #mission {
    clear: both;
    width: 746px;
    border: 2px solid #a5af8c;
    margin-bottom: 10px;
}
#about #mission p {
    width: 450px;
}

/* Admin Fees page elements */

#adminfees h1 {
    font-size: 40px;
    margin-bottom: 40px;
}
#adminfees h2 {
    font-size: 35px;
    margin: 40px 0px 30px 0px;
}
#adminfees h3 {
    font-size: 20px;
    margin: 20px 0px 20px 0px;
    text-align: center;
}
#adminfees p {
    font-size: 15px;
    line-height: 20px;
    color: #616160;
    margin: 0px 0px 10px 0px;
}
#adminfees p span {
    color: #bf4e2d;
}
#adminfees p.note {
    width: 500px;
}
#adminfees div.boxed {
    border: 1px solid #000000;
    padding: 10px;
    margin: 10px 0px 10px 0px;
}
#adminfees ul {
    font-size: 15px;
}
#adminfees ul li {
    line-height: 20px;
}
#adminfees ul li span {
    color: #bf4e2d;
}
#adminfees img.adminfees1 {
    position: absolute;
    top: 1000px;
    right: 0px;
    width: 200px;
}
#adminfees div.documents a {
    float: left;
    display: block;
    width: 150px;
    padding: 0px 30px 15px 0px;
}

/* Montessori page elements */
#montessori h1 {
    font-size: 40px;
    margin-bottom: 40px;
}
#montessori h2 {
    font-size: 30px;
    line-height: 35px;
    color: #bf4e2d;
    margin: 0px 0px 20px 0px;
}
#montessori p {
    font-size: 20px;
    line-height: 25px;
    width: 400px;
    margin: 0px 0px 20px 0px;
}
#montessori p.quote {
    font-size: 30px;
    line-height: 35px;
    width: 750px;
    margin-bottom: 40px;
    text-align: center;
}
#montessori div.montessoriphoto img.bunting-rotated {
    position: absolute;
    top: 0px;
    left: 0px;
}
#montessori div.montessoriphoto img.flower-brown {
    position: absolute;
    top: 80px;
    right: 0px;
    width: 180px;
}
#montessori img.photo { width: 300px; }
#montessori img.montessori1 { padding-top: 40px; }
#montessori #bases {
    position: relative;
    padding-bottom: 280px;
}
#montessori #bases img.montessori2 {
    position: absolute;
    top: 270px;
    left: 0px;
    z-index: 100;
}
#montessori #bases img.montessoribunting {
    position: absolute;
    top: 470px;
    right: 50px;
    z-index: 100;
}
#montessori #bases h3 {
    font-size: 20px;
    line-height: 25px;
    color: #bf4e2d;
    padding: 20px 0px 10px 0px;
}
#montessori #bases p {
    font-size: 16px;
    line-height: 20px;
    width: 750px;
}
#montessori #bases p span {
    color: #bf4e2d;
}

/* Contact page elements */
#contact h1 {
    font-size: 30px;
    color: #bf4e2d;
    text-align: left;
    margin-bottom: 20px;
}
#contact p {
    font-size: 20px;
    line-height: 25px;
    margin: 20px 0px 20px 0px;
    text-align: left;
}
#contact p span {
    color: #bf4e2d;
}    
#contact #instagramblock {
    clear: both;
    text-align: center;
    margin-bottom: 20px;
}
#contact #instagramblock h2 {
    font-size: 40px;
    line-height: 45px;
    color: #bf4e2d;
    text-align: center;
    margin: 0px 0px 20px 0px;
}
#contact img.photo { width: 250px; }

/* Fee calculator elements */

#feecalc legend {
    font-size: 20px;
}
#feecalc fieldset {
    padding-top: 10px;
}
#feecalc div.title, #feecalc label.label, #feecalc input.input, #feecalc div.note {
    display: block;
    float: left;
    font-size: 17px;
    padding: 1px;
    margin: 10px 0px 10px 0px;
}
#feecalc div.title {
    clear: left;
    width: 80px;
    text-align: right;
    color: #bf4e2d;
}
#feecalc label.label {
    width: 100px;
    text-align: right;
    color: #616160;
}
#feecalc input.input {
    width: 20px;
    margin: 12px 0px 0px 0px;
    color: yellow;
}
#feecalc label.wide {
    width: 150px;
}
#feecalc div.day, #feecalc label.day, #feecalc input.day {
    margin-bottom: 2px;
}
#feecalc div.note {
    margin-left: 10px;
    text-align: left;
    color: green;
}
#feecalc div.note span {
    color: red;
}
#quotefeesbox {
    display: inline-block;
    font-size: 20px;
    width: 400px;
    padding: 0px;
    margin: 0px;
}
#quotefees {
    display: inline-block;
    border: 2px solid black;
    font-size: 20px;
    width: 80px;
    padding: 10px;
    margin: 10px 0px 10px 0px;
    text-align: center;
}
#quotecalc {
    font-size: 15px;
    line-height: 20px;
    width: 500px;
    border: 2px solid black;
    padding: 10px;
    margin: 10px 0px 10px 0px;
}

.imgleft {
	float: left;
	padding: 5px;
	margin: 0px;
}
.imgright {
	float: right;
	padding: 5px;
	margin: 0px;
}
.imgcap {
}
.imgclear {
	clear: both;
}
.centred {
    text-align: center !important;
}
.warning {
    color: #dd0000;
}
.alert {
    color: #00cc00;
}
.boxed {
    border: 1px solid #000000;
}
    
/* Global HTML element defaults */
h1, h2, h3, h4, h5, h6 {
    margin: 0px;
    padding: 0px;
    color: #616160;
}   
h1 {
    font-size: 35px;
    font-weight: normal;
    margin: 40px auto 40px auto;
    text-align: center;
}
h2 {
    font-size: 40px;
    font-weight: normal;
    color: #616160;
    margin: 60px auto 40px auto;
    text-align: center;
}
h3 {
    font-size: 20px;
}
p {
    margin: 0px;
    padding: 0px;
}
a {
    color: #616160;
    text-decoration: none;
}
a:hover {
    color: #bf4e2d;
}